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!

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

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

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

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);

Hello, I'd like to work on this

function getMouseCoordsRelativeTo(canvas) {
const { left, top } = canvas.getBoundingClientRect();
const offsetX = left + window.scrollX;
const offsetY = top + window.scrollY;

return {
x: mouseX - offsetX,
y: mouseY - offsetY
};
}

// Usage inside your drawing logic:
const { x, y } = getMouseCoordsRelativeTo(canvas.elt);
rect(x, y, 5, 5);

Why this is better:
Encapsulation: The logic is wrapped in a function — reusable and easier to test.

Destructuring: Extracts only what’s needed from getBoundingClientRect().

Readable: You instantly understand what x and y represent.

Accurate: Includes scroll offsets (window.scrollX/Y) for proper alignment.