Fix fit_canvas_to_parent (#11278)

Follow up to #11057

Implemented suggestions from reviewers from: a simpler
fit_canvas_to_parent leads to an explicit CSS setting to the canvas.

From my understanding, it has do be set after wgpu creation due to wgpu
overriding the canvas width/height:
4400a58470/examples/src/utils.rs (L68-L74)


# Changelog

- Re-enable a `fit_canvas_to_parent`, it's removal from
https://github.com/bevyengine/bevy/pull/11057 was problematic. Still,
its inner working is more simple than before: bevy doesn't handle its
resizing, winit does.

## Migration Guide

- Cancels the migration from
https://github.com/bevyengine/bevy/pull/11057

crates/bevy_window/src/window.rs

@@ -206,6 +206,14 @@ pub struct Window {
     ///
     /// This value has no effect on non-web platforms.
     pub canvas: Option<String>,
+    /// Whether or not to fit the canvas element's size to its parent element's size.
+    ///
+    /// **Warning**: this will not behave as expected for parents that set their size according to the size of their
+    /// children. This creates a "feedback loop" that will result in the canvas growing on each resize. When using this
+    /// feature, ensure the parent's size is not affected by its children.
+    ///
+    /// This value has no effect on non-web platforms.
+    pub fit_canvas_to_parent: bool,
     /// Whether or not to stop events from propagating out of the canvas element
     ///
     ///  When `true`, this will prevent common browser hotkeys like F5, F12, Ctrl+R, tab, etc.
@@ -274,6 +282,7 @@ impl Default for Window {
             transparent: false,
             focused: true,
             window_level: Default::default(),
+            fit_canvas_to_parent: false,
             prevent_default_event_handling: true,
             canvas: None,
             window_theme: None,

crates/bevy_winit/Cargo.toml

@@ -45,7 +45,6 @@ winit = { version = "0.29", default-features = false, features = [
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen = { version = "0.2" }
 web-sys = "0.3"
-
 crossbeam-channel = "0.5"
 
 [package.metadata.docs.rs]

crates/bevy_winit/src/system.rs

@@ -17,6 +17,9 @@ use winit::{
     event_loop::EventLoopWindowTarget,
 };
 
+#[cfg(target_arch = "wasm32")]
+use winit::platform::web::WindowExtWebSys;
+
 use crate::{
     converters::{
         self, convert_enabled_buttons, convert_window_level, convert_window_theme,
@@ -80,6 +83,17 @@ pub(crate) fn create_windows<F: QueryFilter + 'static>(
                 window: window.clone(),
             });
 
+        #[cfg(target_arch = "wasm32")]
+        {
+            if window.fit_canvas_to_parent {
+                let canvas = winit_window
+                    .canvas()
+                    .expect("window.canvas() can only be called in main thread.");
+                let style = canvas.style();
+                style.set_property("width", "100%").unwrap();
+                style.set_property("height", "100%").unwrap();
+            }
+        }
         window_created_events.send(WindowCreated { window: entity });
     }
 }

examples/wasm/index.html

@@ -15,8 +15,6 @@
         background-size: 20px 20px;
       }
       canvas {
-        width: 100%;
-        height: 100%;
         background-color: white;
       }
     </style>

examples/window/window_settings.rs

@@ -17,6 +17,8 @@ fn main() {
                     name: Some("bevy.app".into()),
                     resolution: (500., 300.).into(),
                     present_mode: PresentMode::AutoVsync,
+                    // Tells wasm to resize the window according to the available canvas
+                    fit_canvas_to_parent: true,
                     // Tells wasm not to override default event handling, like F5, Ctrl+R etc.
                     prevent_default_event_handling: false,
                     window_theme: Some(WindowTheme::Dark),

tools/example-showcase/window-settings-wasm.patch

@@ -1,11 +1,13 @@
 diff --git a/crates/bevy_window/src/window.rs b/crates/bevy_window/src/window.rs
-index 7b5c75d38..8e9404b93 100644
+index 87cdfb050..1d87a0bf5 100644
 --- a/crates/bevy_window/src/window.rs
 +++ b/crates/bevy_window/src/window.rs
-@@ -245,8 +245,8 @@ impl Default for Window {
+@@ -266,9 +266,9 @@ impl Default for Window {
              transparent: false,
              focused: true,
              window_level: Default::default(),
+-            fit_canvas_to_parent: false,
++            fit_canvas_to_parent: true,
              prevent_default_event_handling: true,
 -            canvas: None,
 +            canvas: Some("#bevy".to_string()),