[rcore_web] Canvas is incorrectly scaled when window size is applied

[deathbeam]

The deployed example works fine: https://www.raylib.com/examples/core/core_2d_camera_mouse_zoom.html

Latest master (281ee51) behaviour is input gets translated incorrectly and on initial load the canvas is not scaled and positioned incorrectly in bottom-left corner as well. This is because of width: 100% in template that tries to scale the canvas, but this most likely fails to scale the underlying window:

See #4455 for original discussion.

Reproduction steps are simply using latest emsdk master, then navigating to raylib src/ directory, running:

make PLATFORM=PLATFORM_WEB -B

then navigating to examples/ directory and running:

make PLATFORM=PLATFORM_WEB -B

and then running:

emrun --port 8080 core/core_2d_camera_mouse_zoom.html

[raysan5]

@deathbeam thanks for reporting this new issue, I'm reviewing it but I can't find the cause of the issue, even tried reverting to some raylib 5.0 parts but issue also happens! Could it maybe be related to emscripten or some browser change in the way canvas is managed??? I'm a bit lost at the moment... 😢

[Mute124]

If you reverted it, then it is probably an issue with emscripten. It could also just be their browser itself.

[raysan5]

After some investigation, tahnks to raylib Discord community, we found that issue seems related to some change in emscripten. Building with emsdk 3.1.43 it works as expected.

Trying to find at what point the issue was introduced. One potential change reported is on emsdk 3.1.51.

After further testing it was verified that it breaks from 3.1.50 -> 3.1.51

[raysan5]

@asdqwe thanks for the review, it seems the issue has already been detected on Discord discussion #raylib-dev channel, hopefully findings are being added here by @deathbeam and @michaelfiber