Can leptos draw graphics on canvas?

[xtrn143]

Hi everyone, I really want to know if leptos can manipulate H5 Canvas to draw graphics, just like using JS to draw on Canvas.Are there any similar examples？

[gbj]

Yes.

It really has very little to do with Leptos though, and everything to do with the underlying wasm-bindgen and web-sys crates that power the whole Rust/WASM web ecosystem.

I'd recommend starting with the canvas guides in the wasm-bindgen docs and going from there. You can easily get access to an HtmlCanvasElement from a Leptos NodeRef on a <canvas> in the view.

[s1n7ax]

@xtrn143 Were you able to draw on canvas? Any code samples?

[gbj]

https://rustwasm.github.io/docs/wasm-bindgen/examples/2d-canvas.html

[kakserpom]

https://gitcommitsuicide.com/matrix

[s1n7ax]

I guess I was looking for more of a step by step tutorial. Coming from js and some of these things are not obvious. With little bit of luck, I got working as expected.

1. First add web-sys with feature CanvasRenderingContext2d because leptos does not include that I guess? I was clueless when I couldn't find that CanvasRenderingContext2d

[dependencies]
web-sys = { version = "0.3.55", features = ["CanvasRenderingContext2d"] }

2. Use deref to get web-sys element from leptos wrapper (I guess)

#[component]
pub fn Spider() -> impl IntoView {
  let canvas_ref = create_node_ref::<html::Canvas>();

  create_effect(move |_| {
    if let Some(canvas) = canvas_ref.get() {
      let width = canvas.offset_width() as u32;
      let height = canvas.offset_height() as u32;

      canvas.set_width(width);
      canvas.set_height(height);

      let html_canvas = canvas.deref();

      let ctx = html_canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<CanvasRenderingContext2d>()
        .unwrap();

      ctx.set_fill_style(&JsValue::from_str("red"));
      ctx.begin_path();
      // what ever you want to do with the canvas
      ctx.fill();
    }
  });

  view! {
    <canvas node_ref=canvas_ref class=styles::canvas />
  }
}