Fast2D

Draw shapes and text using Canvas Web API or wgpu

Questions ▷ [email protected]

Overview

Fast2D is a Rust library for efficient 2D graphics rendering in browsers and webviews via WebAssembly. It provides a simple API for drawing shapes and text.

Features

• Draw rectangles, circles, lines, and text
  • More shapes and tools will likely be supported in the future as needed
• Multiple rendering backends: WebGL, WebGPU, Canvas API
• Easy font loading and registration
• Tested with MoonZoon and Tauri in examples and in the NovyWave app
• Lyon is used for tessellation (dividing shapes into triangles), Glyphon for text rendering

Tested Platforms (03-05-2025)

OS	Browser	WebGL	WebGPU	Canvas API
Windows	Edge	✅	✅	✅
	Chrome	✅	✅	✅
	Firefox	✅	❌	✅
	Tauri	✅	✅	✅
macOS	Safari	✅	❌	✅
	Chrome	✅	✅	✅
	Tauri	✅	❌	✅
Linux	Chrome	✅	❌	✅
	Firefox	✅	❌	✅
	Tauri	✅	❌	✅

Demo (WebGL)

fast2d-demo.kavik.cz

Installation

Add Fast2D to your Cargo.toml:

fast2d = { git = "https://github.com/FastWaveViewer/Fast2D", features = ["webgl"] }

• Choose one of these features: "webgl", "webgpu", "canvas".
• Add the rev attribute to select a specific commit.
• The library will be published to crates.io later.

Usage Example

Note: Code snippets inspired by browser_example/frontend/src/main.rs

1. Fetch and register fonts

   let fonts = try_join_all([
       fast2d::fetch_file("/_api/public/fonts/Inter-Regular.ttf"),
       fast2d::fetch_file("/_api/public/fonts/Inter-Bold.ttf"),
   ]).await.unwrap_throw();
   
   fast2d::register_fonts(fonts).unwrap_throw();

2. Define objects to render

   let mut example_objects: Vec<fast2d::Object2d> = vec![
       fast2d::Rectangle::new()
           .position(50., 50.)
           .size(200., 150.)
           .color(50, 0, 100, 1.0)
           .into(),
       fast2d::Text::new()
           .text("Simple Rectangle")
           .position(10., 50.)
           .size(350., 120.)
           .color(255, 255, 255, 0.2)
           .font_size(60.)
           .family(fast2d::Family::name("Inter"))
           .into(),
   ];

3. Wrap your HtmlCanvasElement

   let mut canvas_wrapper = fast2d::CanvasWrapper::new_with_canvas(canvas).await;

4. Draw defined objects

   canvas_wrapper.update_objects(move |objects| {
       mem::swap(objects, &mut example_objects)
   });

5. Notify CanvasWrapper on canvas size change

   canvas_wrapper.resized(width, height);

   Note: Size change listener hasn't been implemented directly in this library (yet?), look at MoonZoon's resize_observer.rs for inspiration.

Building & Running Examples

See the browser_example and tauri_example for instructions.

Wasm module size (browser_example)

Compression	WebGL	WebGPU	Canvas API
-	2903 KB	1432 KB	237 KB
Gzip	1100 KB	576 KB	106 KB
Brotli	847 KB	445 KB	88 KB

License

This project is licensed under the MIT License.

Funding

This project is funded through NGI Zero Core, a fund established by NLnet with financial support from the European Commission's Next Generation Internet program. Learn more at the NLnet project page.