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

[stampyzfanz]

Currently mouseX is generated by comparing the x within the screen to the leftmost part of the canvas's border.

p5.js/src/events/mouse.js

Line 864 in 3bb2222

x: (evt.clientX - rect.left) / sx,

Updating the functionality would be a breaking change, so if someone added a border around the canvas and artificially changed mouseX, their application would break, so I'd be hesitant to fix this intuitive functionality. Maybe it could be fixed in p5.js 2.0 if its still accepting proposals.

I haven't looked into it much, but we could manually take into account the width of the border / padding to ensure mouseX lines up with the canvas's content. I'm willing to contribute if we decide to fix this bug.

[HarshitaKatariya]

i want to contribute in this.
you can adjust mouseX and mouseY manually by subtracting the border width and position offsets. Use the getBoundingClientRect() method for this.

like :
const rect = canvas.elt.getBoundingClientRect();
offsetX = rect.left + window.scrollX;
offsetY = rect.top + window.scrollY;
}

const correctedMouseX = mouseX - offsetX;
const correctedMouseY = mouseY - offsetY;

rect(correctedMouseX, correctedMouseY, 5, 5);