How to draw in a canvas?

[ixa-style]

Hi, I am currently trying to create a canvas in which the user could draw with their mouse, however I am not finding any recent example to perform that.
What is the more modern way to proceed?

Here is a snippet of what I am trying to achieve:

struct CanvasState {
    is_drawing: bool,
    current_point: (f64, f64),
}

#[component]
fn DrawingCanvas() -> Element {
    let default_canvas_state = CanvasState {
        is_drawing: false,
        current_point: (0., 0.),
    };

    let mut canvas_state = use_signal(|| default_canvas_state);

    rsx!{
        div {
            canvas {
                onmousedown: move |event: Event<MouseData>| {
                    canvas_state.write().is_drawing = true;
                    canvas_state.write().current_point = (
                        event.data.coordinates().element().x,
                        event.data.coordinates().element().y,
                    );
                },
                onmousemove: move |event: Event<MouseData>| {
                    if canvas_state.read().is_drawing {
                        // Draw a line between canvas_state.current_point and the event's current point.

                        // Update the current point.
                        canvas_state.write().current_point = (
                            event.data.coordinates().element().x,
                            event.data.coordinates().element().y,
                        );
                    }
                },
                onmouseup: move |_| {
                    canvas_state.write().is_drawing = false;
                },
                onmouseleave: move |_| {
                    canvas_state.write().is_drawing = false;
                },
            }
            button { "Clear" }
        }
    }
}

[apoorva-01]

Canvas 2D isn't something you can drive from rsx and signals. You have to reach the real CanvasRenderingContext2d through web-sys and call move_to/line_to/stroke yourself. Dioxus just hands you the DOM node in onmounted, and from there it's plain web-sys.

The shape of it (web target):

use dioxus::prelude::*;
use dioxus_web::WebEventExt;
use wasm_bindgen::JsCast;
use web_sys::{HtmlCanvasElement, CanvasRenderingContext2d};

let mut ctx = use_signal(|| None::<CanvasRenderingContext2d>);
let mut last = use_signal(|| None::<(f64, f64)>);

rsx! {
    canvas {
        width: "800",
        height: "600",
        onmounted: move |el| {
            let canvas: HtmlCanvasElement = el.as_web_event().dyn_into().unwrap();
            let c = canvas.get_context("2d").unwrap().unwrap()
                .dyn_into::<CanvasRenderingContext2d>().unwrap();
            ctx.set(Some(c));
        },
        onmousedown: move |event: Event<MouseData>| {
            let p = event.data.coordinates().element();
            last.set(Some((p.x, p.y)));
        },
        onmousemove: move |event: Event<MouseData>| {
            if let (Some(c), Some((x0, y0))) = (ctx(), last()) {
                let p = event.data.coordinates().element();
                c.begin_path();
                c.move_to(x0, y0);
                c.line_to(p.x, p.y);
                c.stroke();
                last.set(Some((p.x, p.y)));
            }
        },
        onmouseup: move |_| last.set(None),
        onmouseleave: move |_| last.set(None),
    }
}

The key bit is el.as_web_event() (from the dioxus_web::WebEventExt trait). It gives you the web_sys::Element, you downcast it to HtmlCanvasElement, pull the 2D context once on mount, and stash it in a signal so the mouse handlers can reuse it. Your CanvasState signal isn't really needed anymore, the context plus a "last point" is enough to draw segments.

This path is web-only, so gate it behind your web feature. If you want a fuller worked example, discussion #999 (Using Canvas in a dioxus web App) is the canonical one.

[ealmloff]

web-sys-x will make the same code work for desktop in the future