Получение координат клика мыши на элементе canvas

Быстрый ответ

Для обработки клика по элементу canvas и записи его координат, рекомендуется создать обработчик событий с помощью addEventListener и getBoundingClientRect(). Приведём пример кода:

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX – rect.left; // Определение горизонтальной координаты клика
  const y = e.clientY – rect.top; // Определение вертикальной координаты клика
  console.log(`Координаты клика: x=${x}, y=${y}`);
});

Вы сможете увидеть в консоли конкретные координаты x и y курсора при нажатии на элемент canvas.

Мы думаем о пользователях старых браузеров!

Пользователи старых браузеров, например Internet Explorer, заслуживают внимания, поскольку их браузеры могут не поддерживать метод getBoundingClientRect(). В таких случаях как раз и пригодятся event.layerX и event.layerY.

const getCoords = (ev, canvas) => {
  ev = ev || window.event;
  const rect = canvas.getBoundingClientRect();
  const x = ev.clientX – rect.left; // Определение горизонтальной координаты
  const y = ev.clientY – rect.top; // Определение вертикальной координаты
  
  return { x, y };
}

Функция getCoords обеспечивает надёжное и совместимое взаимодействие с элементом canvas даже в старых браузерах.

Обрабатываем нажатия и трансформации

Если ваш элемент canvas отвечает на сенсорные касания так же, как и на клики мыши, вы можете использовать следующий код:

canvas.addEventListener('touchend', (e) => {
  const touch = e.changedTouches[0];
  const rect = canvas.getBoundingClientRect();
  const x = touch.clientX – rect.left;
  const y = touch.clientY – rect.top;
  // Используйте координаты касания, как вам вздумается
});

Учтите, что если в элементе canvas применяются CSS-трансформации, они могут искажать координаты. Прежде чем зафиксировать координаты, убедитесь, что эффекты трансформаций либо скомпенсированы, либо полностью отменены.

Точные координаты с учётом размера и соотношения сторон

Чтобы получить максимальную точность, учтите размеры элемента canvas и соотношение его сторон.

let scaleFactor = canvas.width / canvas.getBoundingClientRect().width;
let scaledX = x * scaleFactor; // Реальная координата X
let scaledY = y * scaleFactor; // Реальная координата Y
console.log(`Масштабированные координаты: x=${scaledX}, y=${scaledY}`);

При обработке событий используйте технику throttle или debounce, чтобы избежать перегрузки приложения из-за большого количества кликов.

Визуализация

Думайте об элементе canvas как о дарте, о клике – как о броске дротика, а координаты [x, y] покажут, где именно он ударил.

canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect(); // Получаем позицию элемента
  const x = event.clientX – rect.left; // Расчитываем X
  const y = event.clientY – rect.top; // Расчитываем Y
});

Поздравляем – вы получили точные координаты места клика.

Визуальная отладка для разработчиков

Сделайте визуальное отображение более наглядным, заменив вывод в консоль на рисование на элементе canvas.

canvas.addEventListener('click', (e) => {
  const ctx = canvas.getContext('2d');
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX – rect.left; // Фиксируем X
  const y = e.clientY – rect.top; // Фиксируем Y
  ctx.fillStyle = '#ff0000'; // "Here you are" обозначается красным
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2, true); // Рисуем круглую метку
  ctx.fill();
});

Полезные материалы

1. MouseEvent – Web API | MDN – подробная информация о свойствах MouseEvent.
2. HTML Canvas – глубокое погружение в возможности HTML5 Canvas.
3. HTML5 Canvas Mouse Coordinates Tutorial – детальное руководство по захвату движения курсора по элементу canvas.
4. Как рисовать кривые Безье на HTML5 Canvas — SitePoint – изучаем создание кривых Безье на элементе canvas.
5. Flavio Copes – надёжное руководство по определению позиции мыши на элементе canvas.