Issue with mouseX and mouseY when using a CSS border

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.9.4

Web browser and version

130.0.6723.117 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows 10 Version 180

Steps to reproduce this

Steps:

1. Make a canvas and in CSS give the canvas a border: canvas { border: 20px darkslategrey groove; }
2. Go back to js and draw a rect at mouseX/Y: rect(mouseX, mouseY, 5, 5)
3. The rect is not centered where the mouse. I think it's because the border takes up 20px of the canvas and it worked when I removed the border.

Snippet:

// Paste your code here :)
rect(mouseX, mouseY, 5, 5)

Start by reproducing the issue with a p5.js canvas styled with a 20px CSS border, then trace how mouseX and mouseY are calculated relative to the canvas. Done means drawing at mouseX/mouseY places the shape at the pointer even when the canvas has a CSS border; add or update coverage if the existing tests include mouse coordinates.