Issue with mouseX and mouseY when using a CSS border

[megaMcKaren]

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)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[ksen0]

Hi @megaMcKaren ,

The CSS border on canvas does have this side effect; sometimes using box-sizing: border-box along with borders can be helpful. Another solution to this is to place the canvas inside a div, for example as in:

function setup() {
  let container = createDiv();
  container.id("sketch-container");
  canvas = createCanvas(400, 400);
  canvas.parent(container); 
}

function draw() {
  background(0);
  rect(mouseX, mouseY, 50, 50)
}

And in the CSS:

#sketch-container {
  display: inline-block;
  border: 20px darkslategrey groove;
}

Tagging the DOM area stewards in case there are other solutions or actions that make sense here here @SarveshLimaye, @SoundaryaKoutharapu, @ramya202000, @BamaCharanChhandogi, @Obi-Engine10, @MarceloGoncalves, @hiddenenigma