How do I programmatically create a canvas in 0.7.x?

[janikarki]

In 0.6.x, I was able to create a canvas, get its rendering context and draw, like so (as mentioned in #2245 (reply in thread)):

fn prerender_image() -> HtmlElement<Canvas> {
    let canvas = html::canvas();
    canvas.set_width(64);
    canvas.set_height(64);
    let ctx = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<CanvasRenderingContext2d>()
        .unwrap();

    // Draw image using ctx

    canvas
}

How do I do this in 0.7.x? HtmlElement<Canvas> (returned by html::canvas()) has become HtmlElement<Canvas, (), ()>, and its get_context() method is gone.

Thanks!

[gbj]

The new approach doesn't work as well with this kind of imperative style, it's true. It now separates "calling some view functions" from "building actual DOM elements" with an additional .build() method.

There are two decent ways to do it:

1. Do it all in an imperative style and return a web-sys HtmlCanvasElement. (You won't be able to use this directly in the view, but you can mount it somewhere using web-sys)

fn prerender_image() -> HtmlCanvasElement {
    use wasm_bindgen::JsCast;
    use web_sys::HtmlCanvasElement;

    let canvas = html::canvas().build();
    let canvas = canvas.unchecked_into::<HtmlCanvasElement>();
    canvas.set_width(64);
    canvas.set_height(64);
    let ctx = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<CanvasRenderingContext2d>()
        .unwrap();

    // Draw image using ctx

    canvas
}

2. Do it all in a declarative style using a NodeRef, and returning a view

fn prerender_image() -> impl IntoView {
    let node_ref = NodeRef::new();
    let canvas = html::canvas().node_ref(node_ref);

    Effect::new(move || {
        if let Some(canvas) = node_ref.get() {
            canvas.set_width(64);
            canvas.set_height(64);
            let ctx = canvas
                .get_context("2d")
                .unwrap()
                .unwrap()
                .dyn_into::<CanvasRenderingContext2d>()
                .unwrap();

            // Draw image using ctx
        }
    });

    canvas
}

[janikarki]

This was helpful, thanks a ton!

As an aside, it seems that I had to add a .clone() in there as well:

let canvas = html::canvas()
        .build()
        .clone() // <----
        .unchecked_into::<HtmlCanvasElement>();

Because otherwise:

cannot move out of dereference of `ElementState<(), Comment>`
move occurs because value has type `Element`, which does not implement the `Copy`
`unchecked_into` takes ownership of the receiver `self`, which moves value
you can `clone` the value and consume it, but this might not be your desired behavior: `<Element as Clone>::clone(&`, `)`
consider cloning the value if the performance cost is acceptable: `.clone()`

I am using these small canvases to draw multiple instances of the same image onto a main canvas using CanvasRenderingContext2d::draw_image_with_html_canvas_element(). Helps a bit with performance.