An example of WASM Fullscreen?

[dpc]

Any examples of achieving a fullscreen in WASM?

[johanhelsing]

I did this in a project on bevy 0.5 and bevy_webgl, not sure if it still works

use bevy::prelude::*;

pub struct FullscreenCanvasPlugin;

impl Plugin for FullscreenCanvasPlugin {
    fn build(&self, app: &mut App) {
        app.add_system(update_window_size.system());
    }
}

fn update_window_size(mut windows: ResMut<Windows>) {
    //See: https://github.com/rust-windowing/winit/issues/1491
    // TODO: use window resize event instead of polling
    use approx::relative_eq;
    let web_window = web_sys::window().unwrap();
    let width = web_window.inner_width().unwrap().as_f64().unwrap() as f32;
    let height = web_window.inner_height().unwrap().as_f64().unwrap() as f32;

    let window = windows.get_primary_mut().unwrap();
    if relative_eq!(width, window.width()) && relative_eq!(height, window.height()) {
        return;
    }

    info!(
        "resizing canvas {:?}, old size {:?}",
        (width, height),
        (window.width(), window.height())
    );
    window.set_resolution(width, height);
}

But there is hopefully a cleaner way to do it.

[mockersf]

oh my bad, I linked the first item with the right name, it's https://docs.rs/bevy/latest/bevy/prelude/struct.WindowDescriptor.html#structfield.fit_canvas_to_parent you can set

something like

app.add_plugins({
    DefaultPlugins.build()
        .set(WindowPlugin {
            window: WindowDescriptor {
                fit_canvas_to_parent: true,
                ..default()
            },
            ..default()
        })
});

then the canvas will fit the size of its parent which you can set in html

[miketwenty1]

this is fire!, thanks for the help

[SnowdenWintermute]

In version 0.12.0 there was Window::fit_canvas_to_parent which changed the resolution of the canvas to the size of it's parent. The parent dimensions could be set with css and the canvas would adjust its element dimensions and resolution. In the version 0.13.0 migration guide it says:

Remove uses of Window::fit_canvas_to_parent in favor of CSS properties, for example:

canvas {
width: 100%;
height: 100%;
}

I set a class on my canvas element but it seems to be overrided to 1280 x 720 (the default window resolution values). Also, a canvas's size in css is different than it's resolution, so I don't really understand how setting a css class would change the canvas resolution even if it did work. Is there an updated example to get a full screen (both html element and full screen resolution) canvas for bevy in 0.13.0?

[miketwenty1]

@SnowdenWintermute Now I'm doing this:

fn fit_canvas_to_parent() {
    let canvas: HtmlCanvasElement = web_sys::window()
        .unwrap()
        .document()
        .unwrap()
        .query_selector("canvas")
        .unwrap()
        .unwrap()
        .unchecked_into();
    let style = canvas.style();
    style.set_property("width", "100%").unwrap();
    style.set_property("height", "100%").unwrap();
}

[Sieabah]

You can also set the css property with !important and it'll force the canvas to be the size of the parent.