Emscripten canvas issues

[LloydJHowarth]

There is quite a few issues with Emscripten Canvas handling as of right now that requires some heavy patching on my end. I'm struggling to debug what's happening as different things keep happening in different situations so I've made multiple edits which you can just ignore.

Setup Requirements

• SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT to not be used or set.
• Non fullscreen window for this example I've used 600x400.

1. Canvas scaling

Lets say we can toggle enter & exit fullscreen mode using "F" key. If we press "F" we expect to enter fullscreen mode and the canvas scales to the document size, then if we press "F" again to exit fullscreen the canvas should revert to the restored windowed mode size we created or set (This does work). However if we fast spam toggle "F" to enter and exit fullscreen the canvas scaling breaks completely. Also fullscreen mode in mobile view on desktop browsers (developer tools) when entering fullscreen doesn't scale to the size of the mobile view, I think its still using the desktop document size or something else.

2. Black Document

If we set SDL_SetWindowFullscreen to true multiple times in a row then use "Escape" to exit fullscreen the canvas scaling is either broken or the canvas scale does revert back to the correct size but now the background document is black. I do however believe this to be linked to the first issue.

This can be fixed by using sanity checks on SDL_SetWindowFullscreen for example:

1. If window is already fullscreen: (from checking for fullscreen flag in SDL_WindowFlags)
2. then dont set SDL_SetWindowFullscreen to true again

3. Fill Document

It would make sense to have some toggle that we can choose to fill the canvas to document or not, right now we have SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT however this is required to be set before window creation, changing its value after that does nothing. However when you need to support both mobile and desktop for your web app ideally you want mobile to always fill the document but desktop to only fill the document in fullscreen mode, if not in fullscreen mode use the restored windowed mode size like other platforms.

Using SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT on scales the canvas correctly regardless mobile, desktop, mobile view on desktop, etc. However now we don't have a Windowed mode view for desktop.

This becomes a little odd, because only on emscripten there is 3 'modes' such as Windowed mode, filled document mode and actual Fullscreen mode. So I'm unsure how this could be handled other than adding a toggle to SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT that can be changed after window creation or implementing a function that does something similar specifically for emscripten.

[LloydJHowarth]

3. Fill Document

The only way I could reasonable see to handle this:

Block the official browser fullscreen feature all together and have Fill Document take its place.

SDL_SetWindowFullscreen true (Fills canvas to document) like SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT does
SDL_SetWindowFullscreen false (restores window to windowed mode size)

However this does require removing the official fullscreen mode browsers support but only in a sense that the URL bar is still visible, we still fill the canvas to the full visible document so I don't really think this is bad.

This simplifies things a lot and 3 modes (Fullscreen, Windowed, Fill Document) just becomes 2 modes (Fullscreen, Windowed)

[slouken]

Adding to the 3.4 milestone for review, but this can be bumped if necessary.

[icculus]

I can reproduce this here:

https://icculus.org/~icculus/emscripten/testsprite-filldoc/testsprite.html

Alt-enter will toggle fullscreen (as will the "fullscreen" button in the top-right).

Spamming alt-enter (like, just clacking the enter key as fast as I can while holding down alt) triggers it, so scaling is wrong and the document behind the canvas turns black.

It seems like it gets something wrong while the transition is in-progress. Two presses doesn't seem to do it here, a third press does. Simplest thing is going to be to refuse fullscreen changes while one is in progress...though I confess this is a sort of "just don't do that" sort of bug, and can wait for 3.6.0.

[icculus]

Block the official browser fullscreen feature all together and have Fill Document take its place.

Uh, no, they have different use-cases. One fills the browser window, at whatever size it might be at a given moment, one fills the entire display.

(these two being closer to the same on mobile, but even there, fullscreen hides the phone's status bar and browser, and the other does not.)