web-sys: canvas hello world - The `wasm-bindgen` Guide

## Keyboard shortcuts

Press `←` or `→` to navigate between chapters

Press `S` or `/` to search in the book

Press `?` to show this help

Press `Esc` to hide this help

# 2D Canvas

View full source code or view the compiled example online

Drawing a smiley face with the 2D canvas API. This is a port of part of this MDN tutorial to `web-sys`.

## `Cargo.toml`

The `Cargo.toml` enables features necessary to query the DOM and work with 2D canvas.

    [package]
    authors = ["The wasm-bindgen Developers"]
    edition = "2021"
    name = "canvas"
    publish = false
    version = "0.0.0"

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

    [dependencies]
    js-sys = { path = "../../crates/js-sys" }
    wasm-bindgen = { path = "../../" }

    [dependencies.web-sys]
    features = ['CanvasRenderingContext2d', 'Document', 'Element', 'HtmlCanvasElement', 'Window']
    path = "../../crates/web-sys"

    [lints]
    workspace = true

## `src/lib.rs`

Gets the `<canvas>` element, creates a 2D rendering context, and draws the smiley face.

    #![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();
    }
    }