Dynamically Sized Canvas

[CodingTil]

When targeting Web, is it possible to have a dynamically sized Canvas?

I have been following this tutorial here, and I am unable to dynamically size the canvas (so resize when Browser Size changes, e.g.).

What I was able to accomplish is to manually set width, height, and style of the Canvas using JS from the Browsers Console:
https://stackoverflow.com/a/9251497/9406165

But I was unable to accomplish the same using web-sys by also using a resize listener on the parent element.

[CodingTil]

I just noticed https://github.com/simbleau/nbody-wasm-sim supports dynamic resizing of canvases. I will try to extract how he accomplishes this, and will then come back here to update the Question.

[CodingTil]

Ok, figured out using https://github.com/simbleau/nbody-wasm-sim. These are the main steps:

1. Get Canvas:
   • You directly need access to an (existing) canvas element, such as: https://github.com/simbleau/nbody-wasm-sim/blob/main/index.html Also see CSS here, for dynamic sizing!
   • Get the HtmlCanvasElement: https://github.com/simbleau/nbody-wasm-sim/blob/main/src/dom.rs#L21 using web-sys. Don't forget to add the required features: cargo.toml
2. Create Surface, Window, and Size with canvas:
   • let surface = instance.create_surface_from_canvas(canvas).unwrap(); (code)
   • let window = WindowBuilder::new().with_canvas(Some(canvas))..... (code)
   • let (width, height) = (canvas.client_width(), canvas.client_height());(code)
   • PhysicalSize::new(width, height) (code) --> Size from Canvas, not from Window

That is basically it. These should be all changes to this tutorial here necessary to accomplish dynamically sized canvas on web!