processing · ksen0 · Aug 11, 2025 · Aug 21, 2025 · Aug 21, 2025 · Aug 21, 2025
diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js
@@ -579,19 +579,17 @@ p5.prototype._getPos = function (x, y) {
 function _canvasLocator(args, canvasWidth, canvasHeight) {
   const noRows = 10;
   const noCols = 10;
+
   let x = args[0];
   let y = args[1];
-  if (x < 0 || x >= canvasWidth || y < 0 || y >= canvasHeight) {
-    return null;
-  }
+
   let locX = Math.floor(x / canvasWidth * noRows);
   let locY = Math.floor(y / canvasHeight * noCols);
-  if (locX === noRows) {
-    locX = locX - 1;
-  }
-  if (locY === noCols) {
-    locY = locY - 1;
-  }
+
+  // clamp out of bounds values
+  locX = Math.min(Math.max(locX, 0), noRows - 1);
+  locY = Math.min(Math.max(locY, 0), noCols - 1);
+
   return {
     locX,
     locY

diff --git a/src/events/mouse.js b/src/events/mouse.js
@@ -19,6 +19,11 @@ import * as constants from '../core/constants';
  *
  * Note: `movedX` continues updating even when
  * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
+ * But keep in mind that during an active pointer lock, mouseX and pmouseX
+ * are locked, so `movedX` is based on
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX value</a>
+ * (which may behave differently in different browsers when the user
+ * is zoomed in or out).
  *
  * @property {Number} movedX
  * @readOnly
@@ -64,6 +69,11 @@ p5.prototype.movedX = 0;
  *
  * Note: `movedY` continues updating even when
  * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
+ * But keep in mind that during an active pointer lock, mouseX and pmouseX
+ * are locked, so `movedX` is based on
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX value</a>
+ * (which may behave differently in different browsers when the user
+ * is zoomed in or out).
  *
  * @property {Number} movedY
  * @readOnly
@@ -810,15 +820,31 @@ p5.prototype._updateNextMouseCoords = function(e) {
       e
     );
 
+
     this._setProperty('mouseX', mousePos.x);
     this._setProperty('mouseY', mousePos.y);
     this._setProperty('winMouseX', mousePos.winX);
     this._setProperty('winMouseY', mousePos.winY);
 
-    const deltaX = this.mouseX - this.pmouseX;
-    const deltaY = this.mouseY - this.pmouseY;
-    this._setProperty('movedX', deltaX);
-    this._setProperty('movedY', deltaY);
+    if (document.pointerLockElement === null) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
+      // "The pointerLockElement ... is null if lock is pending, pointer is unlocked,
+      // or the target is in another document."
+      // In this case, we use mouseX/Y and pmouseX/Y to calculate the distance,
+      // which allows movedX/Y to look consistent at different zoom levels across
+      // browsers.
+      const deltaX = this.mouseX - this.pmouseX;
+      const deltaY = this.mouseY - this.pmouseY;
+      this._setProperty('movedX', deltaX);
+      this._setProperty('movedY', deltaY);
+    }
+    else {
+      // Because mouseX/Y and pmouseX/Y are locked, the elements movementX/Y
+      // is used for movedX/Y - this may behave differently on different
+      // browsers at different zoom levels.
+      this._setProperty('movedX', e.movementX);
+      this._setProperty('movedY', e.movementY);
+    }
   }
 
   if (!this._hasMouseInteracted) {

diff --git a/test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html b/test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
+  </head>
+
+  <body>
+    <h1>Manual test for movedX/Y with/without zoom and with/without pointer lock</h1>
+    <ul>
+      <li>If you move the mouse around, you should see 1 moving circle and 1 still. While <strong>dragging mouse</strong>, they should move at the same rate.</li>
+      <li>After zooming in/out, on all browsers, the circles should still move visually a constant distance relative to each other.</li>
+      <li>Press any key to request pointer lock. Background will be pink if and only if pointer is locked. Now, if you <strong>drag the mouse</strong>, the small circle should be static (because mouseX/Y are locked) and the big circle should move unsurprisingly.</li>
+    </ul>
+      <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  </body>
+</html>
diff --git a/test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js b/test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js
@@ -0,0 +1,31 @@
+function setup() {
+  createCanvas(400, 400);
+}
+
+let x = 200;
+let y = 200;
+function draw() {
+  if (document.pointerLockElement === null){
+    background(220);
+  } else{
+    background(200,0,200);
+  }
+
+  text(movedX, 20, 20);
+  text(movedY, 20, 40);
+  text(mouseX, 50, 20);
+  text(mouseY, 50, 40);
+  circle(mouseX, mouseY, 30);
+
+  //https://editor.p5js.org/SableRaf/sketches/zAXl3tNm5
+  if(mouseIsPressed){
+    x += movedX;
+    y += movedY;
+  }
+
+  circle(x, y, 50);
+
+}
+function keyPressed() {
+  requestPointerLock();
+}