Как перехватывать события действий пользователя на Canvas?

Canvas — это растровая поверхность, на которой рисуются пиксели, а не DOM-элементы. Поэтому браузер не может сам определить, на какую «фигуру» нажал пользователь: он видит только один элемент <canvas>. Все события мыши и касаний приходят на сам canvas, а разработчик должен сам решить, что находится под курсором.

Получение координат

Первым шагом нужно перевести координаты события (clientX/clientY) в систему координат canvas. Для этого используют getBoundingClientRect() и учитывают возможное масштабирование CSS.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function getPos(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  return {
    x: (e.clientX - rect.left) * scaleX,
    y: (e.clientY - rect.top) * scaleY
  };
}

Hit-testing фигур

После получения координат нужно проверить, попала ли точка в какую-либо фигуру. Для простых форм это делается математически, для сложных — через ctx.isPointInPath() или ctx.isPointInStroke().

• Прямоугольник: сравнение x и y с границами.
• Круг: проверка расстояния до центра.
• Произвольный путь: isPointInPath(path, x, y).

const rect = { x: 50, y: 50, w: 100, h: 60 };

canvas.addEventListener('click', (e) => {
  const { x, y } = getPos(e);
  if (x >= rect.x && x <= rect.x + rect.w &&
      y >= rect.y && y <= rect.y + rect.h) {
    console.log('Клик по прямоугольнику');
  }
});

Практические приёмы

Для сложных сцен удобно хранить массив объектов с их геометрией и перебирать его в обратном порядке (сверху вниз по z-index). Для drag-and-drop запоминают выбранный объект на mousedown и обновляют его позицию на mousemove. Для тач-устройств используют pointerdown, pointermove, pointerup — они объединяют мышь, палец и стилус.

Итог: события на Canvas перехватываются через обычные DOM-слушатели, а логика попадания реализуется вручную через координаты и hit-testing. Этот подход применяют в графических редакторах, играх, диаграммах и любых интерактивных визуализациях.