implemented proper behavior with HiDPI

Author: ypujante

src/library_glfw.js

@@ -1249,7 +1249,7 @@ var LibraryGLFW = {
       if (canvas.width  != wNativeScaled) canvas.width  = wNativeScaled;
       if (canvas.height != hNativeScaled) canvas.height = hNativeScaled;
       if (typeof canvas.style != 'undefined') {
-        if (wNativeScaled != wNative || hNativeScaled != hNative) {
+        if (!GLFW.isCSSScalingEnabled()) {
           canvas.style.setProperty( "width", wNative + "px", "important");
           canvas.style.setProperty("height", hNative + "px", "important");
         } else {
@@ -1259,18 +1259,11 @@ var LibraryGLFW = {
       }
     },
 
-    // Overrides Browser.calculateMouseCoords to account for hi dpi scaling
+    // Overrides Browser.calculateMouseCoords to account for HiDPI scaling and CSS scaling
     calculateMouseCoords(pageX, pageY) {
       // Calculate the movement based on the changes
       // in the coordinates.
-      var rect = Module["canvas"].getBoundingClientRect();
-      var cw = Module["canvas"].clientWidth;
-      var ch = Module["canvas"].clientHeight;
-
-      if (GLFW.isCSSScalingEnabled()) {
-        cw = GLFW.active.width;
-        ch = GLFW.active.height;
-      }
+      const rect = Module["canvas"].getBoundingClientRect();
 
       // Neither .scrollX or .pageXOffset are defined in a spec, but
       // we prefer .scrollX because it is currently in a spec draft.
@@ -1285,11 +1278,14 @@ var LibraryGLFW = {
       var adjustedX = pageX - (scrollX + rect.left);
       var adjustedY = pageY - (scrollY + rect.top);
 
-      // the canvas might be CSS-scaled compared to its backbuffer;
-      // SDL-using content will want mouse coordinates in terms
-      // of backbuffer units.
-      adjustedX = adjustedX * (cw / rect.width);
-      adjustedY = adjustedY * (ch / rect.height);
+      // getBoundingClientRect() returns dimension affected by CSS, so as a result:
+      // - when CSS scaling is enabled, this will fix the mouse coordinates to match the width/height of the window
+      // - otherwise the CSS width/height are forced to the width/height of the GLFW window (see updateCanvasDimensions),
+      //   so there is no need to adjust the position
+      if (GLFW.isCSSScalingEnabled() && GLFW.active) {
+        adjustedX = adjustedX * (GLFW.active.width / rect.width);
+        adjustedY = adjustedY * (GLFW.active.height / rect.height);
+      }
 
       return { x: adjustedX, y: adjustedY };
     },