fix position calculation

threejs/lessons/threejs-indexed-textures.md

@@ -162,8 +162,8 @@ const pickHelper = new GPUPickHelper();
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 
@@ -538,8 +538,8 @@ is selected
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 
@@ -609,8 +609,8 @@ to drag the globe.
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 

threejs/lessons/threejs-offscreencanvas.md

@@ -463,15 +463,15 @@ We updated `pickPosition` from the mouse like this
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 
 function setPickPosition(event) {
   const pos = getCanvasRelativePosition(event);
-  pickPosition.x = (pos.x / canvas.clientWidth ) *  2 - 1;
-  pickPosition.y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+  pickPosition.x = (pos.x / canvas.width ) *  2 - 1;
+  pickPosition.y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
 }
 window.addEventListener('mousemove', setPickPosition);
 ```

threejs/lessons/threejs-picking.md

@@ -134,15 +134,15 @@ clearPickPosition();
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 
 function setPickPosition(event) {
   const pos = getCanvasRelativePosition(event);
-  pickPosition.x = (pos.x / canvas.clientWidth ) *  2 - 1;
-  pickPosition.y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+  pickPosition.x = (pos.x / canvas.width ) *  2 - 1;
+  pickPosition.y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
 }
 
 function clearPickPosition() {

threejs/lessons/threejs-voxel-geometry.md

@@ -972,15 +972,15 @@ hit.
 function getCanvasRelativePosition(event) {
   const rect = canvas.getBoundingClientRect();
   return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top,
+    x: (event.clientX - rect.left) * canvas.width  / rect.width,
+    y: (event.clientY - rect.top ) * canvas.height / rect.height,
   };
 }
 
 function placeVoxel(event) {
   const pos = getCanvasRelativePosition(event);
-  const x = (pos.x / canvas.clientWidth ) *  2 - 1;
-  const y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+  const x = (pos.x / canvas.width ) *  2 - 1;
+  const y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
 
   const start = new THREE.Vector3();
   const end = new THREE.Vector3();

threejs/threejs-indexed-textures-picking-and-highlighting.html

@@ -345,8 +345,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-indexed-textures-picking-debounced.html

@@ -350,8 +350,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-indexed-textures-picking.html

@@ -276,8 +276,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-indexed-textures-random-colors.html

@@ -325,8 +325,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-offscreencanvas-w-picking.html

@@ -85,16 +85,16 @@ function main() {  /* eslint consistent-return: 0 */
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
-    };
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
+   };
   }
 
   function setPickPosition(event) {
     const pos = getCanvasRelativePosition(event);
     sendMouse(
-        (pos.x / canvas.clientWidth ) *  2 - 1,
-        (pos.y / canvas.clientHeight) * -2 + 1);  // note we flip Y
+        (pos.x / canvas.width ) *  2 - 1,
+        (pos.y / canvas.height) * -2 + 1);  // note we flip Y
   }
 
   function clearPickPosition() {

threejs/threejs-picking-gpu.html

@@ -205,8 +205,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-picking-raycaster-complex-geo.html

@@ -136,8 +136,8 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 

threejs/threejs-picking-raycaster-transparency.html

@@ -153,15 +153,15 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 
   function setPickPosition(event) {
     const pos = getCanvasRelativePosition(event);
-    pickPosition.x = (pos.x / canvas.clientWidth ) *  2 - 1;
-    pickPosition.y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+    pickPosition.x = (pos.x / canvas.width ) *  2 - 1;
+    pickPosition.y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
   }
 
   function clearPickPosition() {

threejs/threejs-picking-raycaster.html

@@ -146,15 +146,15 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 
   function setPickPosition(event) {
     const pos = getCanvasRelativePosition(event);
-    pickPosition.x = (pos.x / canvas.clientWidth ) *  2 - 1;
-    pickPosition.y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+    pickPosition.x = (pos.x / canvas.width ) *  2 - 1;
+    pickPosition.y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
   }
 
   function clearPickPosition() {

threejs/threejs-tips-preservedrawingbuffer.html

@@ -106,16 +106,16 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 
   const temp = new THREE.Vector3();
   function setPosition(e) {
     const pos = getCanvasRelativePosition(e);
-    const x = pos.x / canvas.clientWidth  *  2 - 1;
-    const y = pos.y / canvas.clientHeight * -2 + 1;
+    const x = pos.x / canvas.width  *  2 - 1;
+    const y = pos.y / canvas.height * -2 + 1;
     temp.set(x, y, 0).unproject(camera);
     state.x = temp.x;
     state.y = temp.y;

threejs/threejs-voxel-geometry-culled-faces-ui.html

@@ -512,15 +512,15 @@ function main() {
   function getCanvasRelativePosition(event) {
     const rect = canvas.getBoundingClientRect();
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: (event.clientX - rect.left) * canvas.width  / rect.width,
+      y: (event.clientY - rect.top ) * canvas.height / rect.height,
     };
   }
 
   function placeVoxel(event) {
     const pos = getCanvasRelativePosition(event);
-    const x = (pos.x / canvas.clientWidth ) *  2 - 1;
-    const y = (pos.y / canvas.clientHeight) * -2 + 1;  // note we flip Y
+    const x = (pos.x / canvas.width ) *  2 - 1;
+    const y = (pos.y / canvas.height) * -2 + 1;  // note we flip Y
 
     const start = new THREE.Vector3();
     const end = new THREE.Vector3();