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

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

{{title}}

Replies: 1 comment

{{title}}

Select a reply

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

lobis Sep 21, 2022

Replies: 1 comment

lobis Sep 22, 2022 Author

lobis
Sep 21, 2022

lobis
Sep 22, 2022
Author