How to correctly size canvas and not break mouse position on web target #2500

lobis · 2022-09-21T21:54:03Z

lobis
Sep 21, 2022

Hello,

I am writing this project as a way to learn rust graphics programming. I want to build a graphical application that can be run on web and as an executable.

I have had many troubles getting the canvas to be the right size on the web target. After reading useful posts such as this one and some tinkering I finally got it working as I want (or so I think). I would like to have the canvas be the same size in pixels as my browser window, so it fits tightly without any scroll bars needed.

I manage to do this via the following code:

    #[cfg(target_arch = "wasm32")]
    {
        use winit::dpi::PhysicalSize;
        use winit::platform::web::WindowExtWebSys;
        web_sys::window()
            .and_then(|win| win.document())
            .and_then(|doc| {
                let anchor = doc
                    .get_element_by_id("wasm-anchor")
                    .expect("element 'wasm-anchor' missing in document");

                let (width, height) = (anchor.client_width(), anchor.client_height());

                window.set_inner_size(PhysicalSize::new(width, height));

                let canvas = window.canvas();
                canvas.style().set_css_text(&format!(
                    "display: block; width: {}px; height: {}px",
                    width, height
                ));
                anchor.append_child(&web_sys::Element::from(canvas)).ok()?;
                Some(())
            })
            .expect("Couldn't append canvas to document body");
    }

I would expect the line window.set_inner_size(PhysicalSize::new(width, height)); to be enough to correctly size the canvas, however it's not the case. The width/height attributes of the html element are not the same as the style height/width.

I manually solve this by explicitly setting them on set_css_text.

My html page body in case the css is causing problems:

  <body>
    <script type="module">
      import init from "./pkg/fractal_explorer.js";
      init().then(() => {
        console.log("WASM Loaded");
      });
    </script>
    <style>
      canvas {
        background-color: white;
      }
      html {
        height: 100%;
      }
      body {
        display: block;
        margin: 0;
        border: 0;
        overflow-y: hidden;
        height: 100%;
      }
      #wasm-anchor {
        height: 100%;
      }
    </style>
    <div id="wasm-anchor"></div>
  </body>

This solution mostly works, the resizing seems to be ok. However I would love to know if they is a simpler / better / recommended solution for this problem, as this feels a bit sketchy.

The problem with this solution is that after the set_css_text call the mouse position is not returning useful values.

Accessing the mouse position from the WindowEvent::CursorMoved { position, .. } => { ... ] on the event loop does not return the correct values, it stops before reaching the max value equal to the size of the canvas. If I remove the set_css_text call, then the canvas is larger than the browser and a scroll bar is needed, however in this case the mouse position works as intended.

I guess if I remove the set_css_text call mouse position will work correctly, however I haven't been able to correctly size the canvas without it. I would appreciate any help.

Thanks a lot!

lobis · 2022-09-22T00:38:52Z

lobis
Sep 22, 2022
Author

I am not sure what is going on but on my deployment (using github pages, latest commit on my main branch) it works fine (https://lobis.github.io/fractal-explorer/). There is no issue. However I cannot get the mouse issue to disappear on my local build, even though they are on the same commit and I have done a clean build (or so I think).

There is probably some silly mistake somewhere I cannot find, please don't lose any time on this (I cannot remove the discussion).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to correctly size canvas and not break mouse position on web target #2500

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to correctly size canvas and not break mouse position on web target #2500

Uh oh!

lobis Sep 21, 2022

Replies: 1 comment

Uh oh!

lobis Sep 22, 2022 Author

lobis
Sep 21, 2022

lobis
Sep 22, 2022
Author