incorrect movedX and movedY behavior on zoomed sketches in Chrome

[SableRaf]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.5

Web browser and version

Chrome 135.0.7049.115 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows 10

Steps to reproduce this

1. Open this sketch in Chrome: https://editor.p5js.org/SableRaf/sketches/zAXl3tNm5
2. Zoom the page in or out (e.g., Ctrl+ or Ctrl- / Cmd+ or Cmd-).
3. Click and drag the circle across the canvas.

let x = 200;
let y = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // The code below causes unexpected behavior in Chrome if you zoom in/out
  
  if(mouseIsPressed){
    x += movedX;
    y += movedY; 
  }
  
  // The code below works correctly regardless of zoom level
  
  // if(mouseIsPressed){
  //   x += mouseX - pmouseX;
  //   y += mouseY - pmouseY; 
  // }
  
  circle(x,y,10);
}

Additional context

According to MDN:

Warning: Browsers use different units for movementX and screenX than what the specification defines. Depending on the browser and operating system, the movementX units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (screenX, screenY) and the previous client values.

Related W3C issue: w3c/pointerlock#42

Suggestion
movedX and movedY should be updated internally to calculate based on mouseX - pmouseX and mouseY - pmouseY, rather than relying on movementX and movementY.