Emscripten should make resizable windows fill the page

[icculus]

Fullscreen and relative mouse mode work here, and as far as I can tell, emsdk's API just calls the same requestPointerLock javascript interfaces behind the scenes that this issue mentions.

SDL reports resize events on the canvas and not the document window (but it listens for window resizes to decide if the canvas has changed; it's complicated). But even if the canvas shrinks because you made the window smaller than the canvas, it'll still pretend it hasn't resized and just scale output appropriately...at least as far as I can tell.

The OP is using a trick I've used myself before: hook into the DOM's window resize events directly, and set the SDL window (that is, the canvas) size based on that. This makes the SDL_Window take the entire browser page and resize dynamically as the user resizes the browser window, and for some games, this is 100% the right thing to do.

But it's not what SDL does by default, and it's not a change we should make at this point. But we should probably either document this or add a hint to make SDL handle this internally (or maybe make SDL_WINDOW_RESIZABLE windows fill the entire browser window and send a resize event on startup?). I'm sure this isn't an uncommon situation with people making web games.

Originally posted by @icculus in #11389 (comment)

[icculus]

Okay, this is implemented.

Here's testsprite with a non-resizable window:

https://icculus.org/~icculus/emscripten/sdl3-resizable-windows/no-resize/

...and here's one created with SDL_WINDOW_RESIZABLE...

https://icculus.org/~icculus/emscripten/sdl3-resizable-windows/resize/

Note that this covers any other UI, which is intentional, for people that don't care about figuring out how to get rid of the default Emscripten console and just want to use the whole page.

[slouken]

Does it respect aspect ratio and min/max limits?

[icculus]

Hmm...no.

We're just defining a rectangular area though, so we could enforce those things (and if the app didn't remove the default emscripten controls, they might peak through).

[slouken]

Sure, let's do that. Want to throw a task on there for 3.4?

[mausimus]

I'm having some issues with this change especially when combined with SDL_WINDOW_HIGH_PIXEL_DENSITY, the initial load is of incorrect size although it corrects itself when manually resizing browser window. In addition, even without high DPI flag, depending on the browser window size sometimes the scrollbars start showing and offset everything. I'm using Chrome on Windows 11, with 125% scale.

With SDL_WINDOW_RESIZABLE and SDL_WINDOW_HIGH_PIXEL_DENSITY:

With SDL_WINDOW_RESIZABLE:

[slouken]

Should we back this out and move it to 3.4 with the other min/max/ratio task?