Use margin: 0 auto for centering canvas in default emscripten shells

[deathbeam]

• Instead of using width: 100% for shell.html simply center the canvas. With width: 100% it breaks input when the window do not fits on screen and on some browsers on first load the canvas do not resizes properly (tested on qutebrowser)
• Center canvas on minshell with margin auto instead of leaving it in top left always. I think this is better minimal default and it only repositions the canvas when it fits inside of window, so when it doesnt the original behaviour is preserved

[deathbeam]

1. The min shell already is not smallest possible template with background color and the output, imo applying very sane and simple default there makes perfect sense
2. Looking at commit history last time the width was touched was 7 years ago. And with the current default it causes input issues, which isnt rly ideal for debug template imo

[raysan5]

@deathbeam @asdqwe Actually, this change is a matter of user preference, one way or another will be better for different use cases. Current styles are used for raylib examples and I set them because I thought it was the best option:

Screenshot 1: Current style

Screenshot 2: Proposed style

Personally, I think current implementation is more attractive with width=100% but it's a personal taste.

About minshell.html, I use it for my tools dev and I customize it depending on my needs. I think users should customize those files for their specific project needs. For example, some of my tools support window-resizing while others have a fixed window-size.

@deathbeam About the input issues, please, could you be more specific and provide some example?

[deathbeam]

So for the issues with width: 100%, simply opening some example after building it with default shell causes 2 issues that are reproducible basically every time for me:

1. On first open, the canvas is mispositioned until i zoom-out/zoom-in again (at first its in bottom left corner, then correctly jumps to top-left corner)
2. When zooming in because of width: 100% the mouse position no longer aligns with actual cursor position. This works correctly without width: 100%. I reproduced this in both qutebrowser and latest chromium, so should be easily reproducible by yourself as well. And this also happens when canvas no longer fits the viewport in general (for example simply opening dev tools or resizing window to be smaller than canvas)

As for the minshell change, I think for majority of projects the canvas at least being centered instead of being in top left corner is better default as far as usability goes even when modifying the file is encouraged but the primary reason why I changed that one was because the shell.hmtl did not worked properly because of the issue mentioned above and I wanted to use some reasonable default. So I dont mind splitting the change to 2 separate PRs as well so it can be discussed separately.

[raysan5]

@deathbeam I'm afraid I can't reproduce any of the mentioned issues: https://www.raylib.com/examples/core/core_2d_camera_mouse_zoom.html

Please, could you provide some example where it can be clearly seen the issue?

[deathbeam]

I cant reproduce it via link you provided @raysan5 but i can reproduce it when building locally:

EDIT: Looks like the link you provided is not master build as its using yellow dot instead of red (or maroon) like in master.

Build 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 you are right! building with latest raylib 5.5 gives a wrong display, and it shouldn't!

But issue is not the shell.html style, something get broken in there... 😕

[deathbeam]

Yea if it worked before then its probably better to close this and solve the actual issue instead, i will open one for tracking.

[deathbeam]

#4464 opened here