Fixing resize and mouse input coordinates

Also replacing hardcoded canvas id references with module variable usages

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;
     }
@@ -1303,7 +1303,9 @@ int InitPlatform(void)
     glfwSetKeyCallback(platform.handle, KeyCallback);
     glfwSetCharCallback(platform.handle, CharCallback);
     glfwSetMouseButtonCallback(platform.handle, MouseButtonCallback);
-    glfwSetCursorPosCallback(platform.handle, MouseCursorPosCallback); // Track mouse position changes
+    // For some reason, GLFW mouse inputs are not properly working
+    // Using emscripten mouse inputs instead (which was formerly ignored in favor of GLFW)
+    // glfwSetCursorPosCallback(platform.handle, MouseCursorPosCallback); // Track mouse position changes
     glfwSetScrollCallback(platform.handle, MouseScrollCallback);
     glfwSetCursorEnterCallback(platform.handle, CursorEnterCallback);
 
@@ -1621,7 +1623,24 @@ static EM_BOOL EmscriptenMouseMoveCallback(int eventType, const EmscriptenMouseE
         CORE.Input.Mouse.previousPosition.x = lockedMousePos.x - mouseEvent->movementX;
         CORE.Input.Mouse.previousPosition.y = lockedMousePos.y - mouseEvent->movementY;
     }
+    else
+    {
+        // canvasX and canvasY are 0 0 (no idea why) - clientX and clientY are provided but are 
+        // not relative to the canvas, so we have to obtain the top-left corner of the canvas
+        // Moreover, the canvas size can be different from the window size, so we have to normalize
+        // the mouse position to the window size to make sure it's correct
+        double canvasLeft = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().left; );
+        double canvasTop = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().top; );
+        double canvasRight = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().right; );
+        double canvasBottom = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().bottom; );
+
+        double normalizedX = (mouseEvent->clientX - canvasLeft) / (canvasRight - canvasLeft);
+        double normalizedY = (mouseEvent->clientY - canvasTop) / (canvasBottom - canvasTop);
 
+        CORE.Input.Mouse.currentPosition.x = (float) (normalizedX * CORE.Window.screen.width);
+        CORE.Input.Mouse.currentPosition.y = (float) (normalizedY * CORE.Window.screen.height);
+    }
+    
     return 1; // The event was consumed by the callback handler
 }
 
@@ -1674,28 +1693,32 @@ 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 = EM_ASM_INT( return window.innerWidth; );
-    int height = EM_ASM_INT( return window.innerHeight; );
+    int windowWidth = EM_ASM_INT( return window.innerWidth; );
+    int windowHeight = EM_ASM_INT( return window.innerHeight; );
+    int canvasWidth = EM_ASM_INT( return Module.canvas.width; );
+    int canvasHeight = EM_ASM_INT( return Module.canvas.height; );
 
-    if (width < (int)CORE.Window.screenMin.width) width = CORE.Window.screenMin.width;
-    else if ((width > (int)CORE.Window.screenMax.width) && (CORE.Window.screenMax.width > 0)) width = CORE.Window.screenMax.width;
+    if (windowWidth < (int)CORE.Window.screenMin.width) windowWidth = CORE.Window.screenMin.width;
+    else if ((windowWidth > (int)CORE.Window.screenMax.width) && (CORE.Window.screenMax.width > 0)) windowWidth = CORE.Window.screenMax.width;
 
-    if (height < (int)CORE.Window.screenMin.height) height = CORE.Window.screenMin.height;
-    else if ((height > (int)CORE.Window.screenMax.height) && (CORE.Window.screenMax.height > 0)) height = CORE.Window.screenMax.height;
+    if (windowHeight < (int)CORE.Window.screenMin.height) windowHeight = CORE.Window.screenMin.height;
+    else if ((windowHeight > (int)CORE.Window.screenMax.height) && (CORE.Window.screenMax.height > 0)) windowHeight = CORE.Window.screenMax.height;
 
-    emscripten_set_canvas_element_size(GetCanvasId(), width, height);
+    if (IsWindowFullscreen()) {
+        canvasWidth = windowWidth;
+        canvasHeight = windowHeight;
+    }
+    emscripten_set_canvas_element_size(GetCanvasId(), canvasWidth, canvasHeight);
 
-    SetupViewport(width, height); // Reset viewport and projection matrix for new size
+    SetupViewport(canvasWidth, canvasHeight); // Reset viewport and projection matrix for new size
 
-    CORE.Window.currentFbo.width = width;
-    CORE.Window.currentFbo.height = height;
+    CORE.Window.currentFbo.width = canvasWidth;
+    CORE.Window.currentFbo.height = canvasHeight;
     CORE.Window.resizedLastFrame = true;
 
-    if (IsWindowFullscreen()) return 1;
-
     // Set current screen size
-    CORE.Window.screen.width = width;
-    CORE.Window.screen.height = height;
+    CORE.Window.screen.width = canvasWidth;
+    CORE.Window.screen.height = canvasHeight;
 
     // NOTE: Postprocessing texture is not scaled to new size