How do I get the coordinates of a mouse click on a canvas element?

javascript

event-handling

canvas

coordinates

byAnton Shumikhin·Aug 29, 2024

Here is a fast lane to capture click coordinates on a canvas. This uses addEventListener and getBoundingClientRect(). Brace yourself:

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left; // Where's Waldo, horizontally speaking
  const y = e.clientY - rect.top; // Waldo's vertical hiding spot
  console.log(`Click coordinates: x=${x}, y=${y}`);
});

This logs the x and y positions on the canvas where your mouse clicked.

Old Browser Peeps Need Love Too!

Sure, new browsers get all the attention. But let's not ignore the veterans like Internet Explorer. They might not support getBoundingClientRect(), but event.layerX and event.layerY come to our rescue.

const getCoords = (ev, canvas) => {
  ev = ev || window.event;
  const rect = canvas.getBoundingClientRect(), 
        x = ev.clientX - rect.left, // The horizontal coordinate
        y = ev.clientY - rect.top; // The vertical coodinate
  
  return { x, y }; // Grouping the two together, like best pals!
}

Implementing a function like getCoords ensures our canvas interactions are robust and compatible with older browsers.

Touch Event Handling and Transformations

Does your canvas respond to touch events just like clicks? Great! If not, here comes our saviour:

canvas.addEventListener('touchend', (e) => {
  const touch = e.changedTouches[0];
  const rect = canvas.getBoundingClientRect();
  const x = touch.clientX - rect.left; // Found ya, touch event!
  const y = touch.clientY - rect.top; // Gotcha this time!
  // Use x and y for touch coordinates
});

When you transform your canvas via CSS, it may distort your click coordinates. Make sure to revert or adjust these transformations before capturing the coordinates.

Accurate Coordinates with Size and Aspect Ratio

Get precise to the pixel by considering your canvas's aspect ratio and size.

let scaleFactor = canvas.width / canvas.getBoundingClientRect().width;
let scaledX = x * scaleFactor; // Actual X coordinate
let scaledY = y * scaleFactor; // Actual Y coordinate
console.log(`Scaled coordinates: x=${scaledX}, y=${scaledY}`);

Optimize your event listeners with throttling or debouncing techniques. It saves your application from the wrath of excessive rapid clicks!

Developer's Visual Debugger Aid

Who needs print statements when you can draw your debug indicators?

canvas.addEventListener('click', (e) => {
  const ctx = canvas.getContext('2d');
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left; // *marks the spot* horizontally
  const y = e.clientY - rect.top; // *marks the spot* vertically
  ctx.fillStyle = '#ff0000'; // Red signals "you are here"
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2, true); // Circle: "X marks the spot"
  ctx.fill();
});