Issue with mouseX and mouseY when using a CSS border #7400
Open
Description
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:
- Make a canvas and in CSS give the canvas a border: canvas { border: 20px darkslategrey groove; }
- Go back to js and draw a rect at mouseX/Y: rect(mouseX, mouseY, 5, 5)
- 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)