Rust Canvas

Build interactive graphics for the browser with Rust + WebAssembly

🚀 Quick Start

Get started with just a few files from the dist/ directory:

import { loadWasm } from './wasm-utils.js';
import { getCanvasImports } from './canvas-wasm.js';

document.addEventListener('DOMContentLoaded', async () => {
    const wasmExports = await loadWasm('./your-compiled.wasm', getCanvasImports());
    wasmExports.main_function();
});
use web_canvas::canvas;
use web_canvas::console;

struct Object;
impl canvas::EventHandler for Object { ... }

#[no_mangle]
pub fn main_function() {
    console::log("Starting...");
    let cv = canvas::Canvas::from_element("example-canvas");
    cv.register_handler(Object);
    cv.start_animation_loop();
}

Copy these files from dist/ to integrate Web Canvas into your project:

🏓 Live Demo: Pong Game

🎮 Controls:

Mouse: Move paddle left and right
Arrow Keys: Left/Right for paddle, Up/Down for speed
Game Control: Press SPACE to pause/start
Speed Control:
  • Left-click: Increase speed (+0.5x)
  • Right-click: Decrease speed (-0.5x)
  • Middle-click: Reset speed to 1.0x
  • Arrow Up/Down: Adjust speed, Esc to reset
Game: Left-click to restart when game over
📁 View on GitHub

Built with ❤️ using Rust + WebAssembly