canvas

web-sys: canvas hello world

Not working in Firefox anymore . ??? Chrome = Ok

Drawing a smiley face with the 2D canvas API. This is a port of part of this MDN tutorial to web-sys. _ [wasm-bindgen Guide]

Original [web-sys: canvas hello world]

setup the project


cargo new canvas --lib
cd canvas
mkdir -p www/js www/htmlhttp -a 127.0.0.1 -p 8080 www
cargo add wasm-bindgen js-sys
cargo add web-sys -F "CanvasRenderingContext2d, Document, Element, HtmlCanvasElement, Window"

edit Cargo.toml to add crate-type & put web-sys in its own dependecy section


[lib]
crate-type = ["cdylib",]

...


[dependencies.web-sys]
version = "0.3.66"
features = [
  'CanvasRenderingContext2d',
  'Document',
  'Element',
  'HtmlCanvasElement',
  'Window',
]

in www/html/index.html we have


<!doctype html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>canvas hello: nobundle</title>
  </head>
  <body>
        <canvas id="canvas" height="150" width="150"></canvas>

        <script type="module" src="../js/index.js"></script>
  </body>
</html>

and in www/js/index.js


import init from "../pkg/canvas.js"

async function run() {
    const wasm = await init();
}

run();

Everything happens in src


#![allow(unused)]
fn main() {
use std::f64;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
fn start() {
    let document = web_sys::window().unwrap().document().unwrap();
    let canvas = document.get_element_by_id("canvas").unwrap();
    let canvas: web_sys::HtmlCanvasElement = canvas
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .map_err(|_| ())
        .unwrap();

    let context = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .unwrap();

    context.begin_path();

    // Draw the outer circle.
    context
        .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the mouth.
    context.move_to(110.0, 75.0);
    context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap();

    // Draw the left eye.
    context.move_to(65.0, 65.0);
    context
        .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the right eye.
    context.move_to(95.0, 65.0);
    context
        .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    context.stroke();
}

}

build and serve


wasm-pack build --target web --no-typescript --out-dir www/pkg


http www

open index.html


firefox http://localhost:8000/html/

canvas smiley

What's next?

<-- web-sys: Weather report web-sys: canvas Julia set -->