Replacing hardcoded canvas id references with module variable usages (#4735)

zet23t · web-flow · commit 1f6de0c507ae · 2025-01-31T00:34:51.000+01:00
Should also have the benefit of being faster.
diff --git a/src/platforms/rcore_web.c b/src/platforms/rcore_web.c
@@ -185,8 +185,8 @@ void ToggleFullscreen(void)
         else if (CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) enterFullscreen = true;
         else
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
-            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
+            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
             if (canvasStyleWidth > canvasWidth) enterFullscreen = false;
             else enterFullscreen = true;
         }
@@ -293,7 +293,7 @@ void ToggleBorderlessWindowed(void)
         else if (CORE.Window.flags & FLAG_FULLSCREEN_MODE) enterBorderless = true;
         else
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
             const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
             if (screenWidth == canvasWidth) enterBorderless = false;
             else enterBorderless = true;
@@ -379,8 +379,8 @@ void SetWindowState(unsigned int flags)
         const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
         if (wasFullscreen)
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
-            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
+            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
             if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) || canvasStyleWidth > canvasWidth) ToggleBorderlessWindowed();
         }
         else ToggleBorderlessWindowed();
@@ -393,7 +393,7 @@ void SetWindowState(unsigned int flags)
         const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
         if (wasFullscreen)
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
             const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
             if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) || screenWidth == canvasWidth ) ToggleFullscreen();
         }
@@ -512,7 +512,7 @@ void ClearWindowState(unsigned int flags)
         const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
         if (wasFullscreen)
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
             const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
             if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) || (screenWidth == canvasWidth)) EM_ASM(document.exitFullscreen(););
         }
@@ -526,8 +526,8 @@ void ClearWindowState(unsigned int flags)
         const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
         if (wasFullscreen)
         {
-            const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
-            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
+            const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
+            const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
             if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) || (canvasStyleWidth > canvasWidth)) EM_ASM(document.exitFullscreen(););
         }
 
@@ -685,7 +685,7 @@ void SetWindowOpacity(float opacity)
 {
     if (opacity >= 1.0f) opacity = 1.0f;
     else if (opacity <= 0.0f) opacity = 0.0f;
-    EM_ASM({ document.getElementById('canvas').style.opacity = $0; }, opacity);
+    EM_ASM({ Module.canvas.style.opacity = $0; }, opacity);
 }
 
 // Set window focused
@@ -962,7 +962,7 @@ void SetMouseCursor(int cursor)
 {
     if (CORE.Input.Mouse.cursor != cursor)
     {
-        if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { document.getElementById('canvas').style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);
+        if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { Module.canvas.style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);
 
         CORE.Input.Mouse.cursor = cursor;
     }

Original file line number	Diff line number	Diff line change
`@@ -185,8 +185,8 @@ void ToggleFullscreen(void)`
`185`	`185`	`else if (CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) enterFullscreen = true;`
`186`	`186`	`else`
`187`	`187`	`{`
`188`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
`189`		`- const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);`
	`188`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
	`189`	`+ const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);`
`190`	`190`	`if (canvasStyleWidth > canvasWidth) enterFullscreen = false;`
`191`	`191`	`else enterFullscreen = true;`
`192`	`192`	`}`
`@@ -293,7 +293,7 @@ void ToggleBorderlessWindowed(void)`
`293`	`293`	`else if (CORE.Window.flags & FLAG_FULLSCREEN_MODE) enterBorderless = true;`
`294`	`294`	`else`
`295`	`295`	`{`
`296`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
	`296`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
`297`	`297`	`const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);`
`298`	`298`	`if (screenWidth == canvasWidth) enterBorderless = false;`
`299`	`299`	`else enterBorderless = true;`
`@@ -379,8 +379,8 @@ void SetWindowState(unsigned int flags)`
`379`	`379`	`const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);`
`380`	`380`	`if (wasFullscreen)`
`381`	`381`	`{`
`382`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
`383`		`- const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);`
	`382`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
	`383`	`+ const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);`
`384`	`384`	`if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) \|\| canvasStyleWidth > canvasWidth) ToggleBorderlessWindowed();`
`385`	`385`	`}`
`386`	`386`	`else ToggleBorderlessWindowed();`
`@@ -393,7 +393,7 @@ void SetWindowState(unsigned int flags)`
`393`	`393`	`const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);`
`394`	`394`	`if (wasFullscreen)`
`395`	`395`	`{`
`396`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
	`396`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
`397`	`397`	`const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);`
`398`	`398`	`if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) \|\| screenWidth == canvasWidth ) ToggleFullscreen();`
`399`	`399`	`}`
`@@ -512,7 +512,7 @@ void ClearWindowState(unsigned int flags)`
`512`	`512`	`const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);`
`513`	`513`	`if (wasFullscreen)`
`514`	`514`	`{`
`515`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
	`515`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
`516`	`516`	`const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);`
`517`	`517`	`if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) \|\| (screenWidth == canvasWidth)) EM_ASM(document.exitFullscreen(););`
`518`	`518`	`}`
`@@ -526,8 +526,8 @@ void ClearWindowState(unsigned int flags)`
`526`	`526`	`const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);`
`527`	`527`	`if (wasFullscreen)`
`528`	`528`	`{`
`529`		`- const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);`
`530`		`- const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);`
	`529`	`+ const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);`
	`530`	`+ const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);`
`531`	`531`	`if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) \|\| (canvasStyleWidth > canvasWidth)) EM_ASM(document.exitFullscreen(););`
`532`	`532`	`}`
`533`	`533`
`@@ -685,7 +685,7 @@ void SetWindowOpacity(float opacity)`
`685`	`685`	`{`
`686`	`686`	`if (opacity >= 1.0f) opacity = 1.0f;`
`687`	`687`	`else if (opacity <= 0.0f) opacity = 0.0f;`
`688`		`- EM_ASM({ document.getElementById('canvas').style.opacity = $0; }, opacity);`
	`688`	`+ EM_ASM({ Module.canvas.style.opacity = $0; }, opacity);`
`689`	`689`	`}`
`690`	`690`
`691`	`691`	`// Set window focused`
`@@ -962,7 +962,7 @@ void SetMouseCursor(int cursor)`
`962`	`962`	`{`
`963`	`963`	`if (CORE.Input.Mouse.cursor != cursor)`
`964`	`964`	`{`
`965`		`- if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { document.getElementById('canvas').style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);`
	`965`	`+ if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { Module.canvas.style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);`
`966`	`966`
`967`	`967`	`CORE.Input.Mouse.cursor = cursor;`
`968`	`968`	`}`