[rcore] Feature request/discussion: MaximizeWindow() on HTML5 to maximize the canvas to fill the browser viewport?

[OetkenPurveyorOfCode]

Currently calling MaximizeWindow() on HTML5/WASM does nothing but print a message to the console:

WARNING: MaximizeWindow() not available on target platform

I want maximize window to maximize the canvas to fill the viewport of the browser. Note that this is different from fullscreen which also hides the browser chrome like the Navigation bar etc..

I want something like this in rcore_web.c:

EM_JS(void,  EmscriptenMaximizeWindow (), {
    var canvas = document.getElementById('canvas');
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.position = "absolute";
    canvas.style.top = "50%";
    canvas.style.left = "50%";
    canvas.style.transform = 'translate(-50%,-50%)';
});

void MaximizeWindow(void)
{
    EmscriptenMaximizeWindow();
}

Or alternatively an option that disables canvas sizing on InitWindow so the canvas can be layouted using CSS in the shell.html file.

See also: https://www.reddit.com/r/raylib/comments/1g4gg27/raylib_wasm_how_to_resize_the_canvas_to_fill_the/

If this is something you do not want to support you can close this issue.

[OetkenPurveyorOfCode]

Let me know if you want me to PR this.

I'll have to try it out first. I'll try it tomorrow.

[OetkenPurveyorOfCode]

However it shouldn't be done with canvas.style as it will force scaling upon the window (canvas) which isn't the maximizing standard behavior for a window.

I agree. It is just that I did not notice because I was using the 3D camera. The behaviour of MaximizeWindow() should be consistent across platforms.

I'll have to try it out first.
Well, when I tried it at first there was a tiny margin around the canvas element and so it has scrollbars. I eventually figured out that it was because my browser adds an 8px margin around the HTML body and shenanigans like that. It works fine now.

I think the ability to maximize a window is useful. It is a bit less attractive as a feature to me now because disabling the margins on body and canvas elements is an extra thing to do.

The other solution would be to have a flag/mode for raylib, where InitWindow does not change the width and height of the canvas so the canvas can be layouted statically and maximized using CSS. This would have the advantage of allowing a raylib app be in a blog post or in a html table or something. The disadvantage of this would be that it is not possible to maximize restore the canvas during the runtime of the raylib app.

Let me know if you want me to PR this.
I want it, but I cannot speak for others in the raylib community.

PS:
One question: why did you call assign the innerWidth/innerHeight of window to a variable called tabWidth/tabHeight as I don't quite get the "tab" naming?

[OetkenPurveyorOfCode]

The window.inner* is the web browser's tab (inner) "area". Which is the actual usable area the canvas can fill without overflow (note: if the page is inside an iframe, it will be the iframe dimension).

Makes sense now.

In my weird personal use of the english language the word "tab" means a navigational element at the top not the document view area below it. Maybe you can argue that a tab is actually the size of the navigational element plus the document area, so I guess the tab is larger than the view area as it surrounds it. Actually they are inspired by tabs in filing cabinets which stick to the documents, you see the size of the tab is the small thing that sticks out plus the bit that sticks to the paper card.

You see I would have called it innerWidth or viewportWidth. But you see I am overthinking things about a detail that does not matter.