[core] `FLAG_WINDOW_RESIZABLE` has no effect on `PLATFORM_WEB`

[Peter0x44]

Issue description

FLAG_WINDOW_RESIZABLE has no effect on PLATFORM_WEB

Issue Screenshot

Code Example

#include "raylib.h"

#ifdef __EMSCRIPTEN__
    #include <emscripten/emscripten.h>
#endif

const int screenWidth = 800;
const int screenHeight = 450;

void UpdateDrawFrame(void);


int main(void)
{
    SetConfigFlags(FLAG_WINDOW_RESIZABLE);
    InitWindow(screenWidth, screenHeight, "web resizing example");

#ifdef __EMSCRIPTEN__
    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
#else
    SetTargetFPS(60);

    while (!WindowShouldClose())
    {
        UpdateDrawFrame();
    }
#endif

    CloseWindow();

    return 0;
}

void UpdateDrawFrame(void)
{
    static Vector2 ballPosition = (Vector2) { screenWidth/2.0f, screenHeight/2.0f };
    static Vector2 ballSpeed = (Vector2) { 6.0f, 4.0f };
    const float ballRadius = 10.0f;

    ballPosition.x += ballSpeed.x;
    ballPosition.y += ballSpeed.y;

    if (((ballPosition.x + ballRadius) > GetScreenWidth()) || ((ballPosition.x - ballRadius) < 0)) ballSpeed.x *= -1.0f;
    if (((ballPosition.y + ballRadius) > GetScreenHeight()) || ((ballPosition.y - ballRadius) < 0)) ballSpeed.y *= -1.0f;

    BeginDrawing();

        ClearBackground(GREEN);

        DrawCircleV(ballPosition, ballRadius, RED);

    EndDrawing();
}

compile with:
emcc resize_example.c -I path/to/raylib/src ./libraylib.a -s USE_GLFW=3 -s WASM=1 --shell-file minshell.html -o resize_example.html

The following 3 lines seem to do nothing:

raylib/src/rcore.c

Lines 6176 to 6178 in db55bed

	int width = GetCanvasWidth();
	int height = GetCanvasHeight();
	emscripten_set_canvas_element_size("#canvas",width,height);

They set the height of the canvas... to the existing height/width of the canvas, so they are unchanged
The callback they are in is unused, anyway

the following patch seems to fix the issue:

diff --git a/src/rcore.c b/src/rcore.c
index 45495bb1..5b29a5bf 100644
--- a/src/rcore.c
+++ b/src/rcore.c
@@ -925,9 +925,9 @@ void InitWindow(int width, int height, const char *title)
     // Check fullscreen change events(note this is done on the window since most browsers don't support this on #canvas)
     //emscripten_set_fullscreenchange_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, 1, EmscriptenResizeCallback);
     // Check Resize event (note this is done on the window since most browsers don't support this on #canvas)
-    //emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, 1, EmscriptenResizeCallback);
+    emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, 1, EmscriptenResizeCallback);
     // Trigger this once to get initial window sizing
-    //EmscriptenResizeCallback(EMSCRIPTEN_EVENT_RESIZE, NULL, NULL);
+    EmscriptenResizeCallback(EMSCRIPTEN_EVENT_RESIZE, NULL, NULL);
 
     // Support keyboard events -> Not used, GLFW.JS takes care of that
     //emscripten_set_keypress_callback("#canvas", NULL, 1, EmscriptenKeyboardCallback);
@@ -6042,8 +6042,8 @@ static EM_BOOL EmscriptenResizeCallback(int eventType, const EmscriptenUiEvent *
 
     // This event is called whenever the window changes sizes,
     // so the size of the canvas object is explicitly retrieved below
-    int width = GetCanvasWidth();
-    int height = GetCanvasHeight();
+    int width = event->windowInnerWidth;
+    int height = event->windowInnerHeight;
     emscripten_set_canvas_element_size("#canvas",width,height);
 
     SetupViewport(width, height);    // Reset viewport and projection matrix for new size

It uncomments the lines that set the callback, and sets the canvas width/height to the windowInnerWidth and windowInnerHeight

The result:

resizer.mp4

[raysan5]

@Peter0x44 Sincerely, I can't remember why that code was there and what problem it tried to solve... but feel free to send a PR with the proposed changes.

[RadsammyT]

Was kinda curious of the backstory and did some digging into this so heres a quick gist. The 3 lines that set the canvas dimensions to itself was introduced with PR #1840 which introduced/finished up emscripten canvas resizing. To my knowledge, the foundation of this hasn't been changed since (aside from the occasional commenting and tweaking).

A while after this, raysan commented the most of the code out for review (see 8f2d983) as games and examples would somewhat break when going into fullscreen, which should be where we are right now.

[Peter0x44]

I tried with my proposed patch, and didn't notice any issue upon going into fullscreen
Should I just submit it as a PR, then?

[RadsammyT]

And just to make sure, you didn't notice any issue when pressing Fullscreen in src/shell.html?
If no issues were found even from the shell then it should be fine to submit it as a PR.

[raysan5]

didn't notice any issue when pressing Fullscreen in src/shell.html?

@Peter0x44 did you try this case?

[raysan5]

@Peter0x44 tested the proposed change and it breaks the full-screen option, that was the reason it was commented. The issue should be fixed/reviewed in some other way but I remember it was not an easy topic, many side-cases and possibilities.

[raysan5]

@ubkp Please note that this issue could be very tricky, I remember dealing with it in the past and not being able to find a proper solution. The point is that window resizing vs scaling is application-dependant. For example:

• Game application: You want the canvas to be properly scaled (maintaining aspect-ratio) to the browser window.
• Tool application: If tool supports resizing flag (FLAG_WINDOW_RESIZING), you want the canvas to be expanded with the browser window size, that could not be full browser size but only a part of it (imagine some header div in the browser or footer).

Not to mention that fullscreeen switch will also launch the window resizing callback and the expectations for full-screen are completely different, actually there are multiple fullscreen strategies available.

Oh, and just a last detail that I came up recently, the results seen on desktop-browser could completely differ from mobile-browser. That's another added problem to take care...

@raysan5 Thank you very much for the guidance and references. I'll give it a week to see how far I can go. If I don't figure out anything by then, I'll withdraw.

[raysan5]

@ubkp Any update on this issue? If no updates I will close it, I manage resizing as canvas CSS and it works for me.

[Peter0x44]

Could you elaborate on this CSS? I think it would be good reference to others

[raysan5]

@Peter0x44 You can check shell.html behaviour, provided with raylib. It resizes canvas with browser.

EDIT: Here an example: https://www.raylib.com/timeline.html