Как обработать события мыши на Canvas?

1

const canvas = document.getElementById('myCanvas');

1
2
3

canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mousemove', onMouseMove);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function onMouseDown(event) {
  // обработка нажатия кнопки мыши
}

function onMouseUp(event) {
  // обработка отпускания кнопки мыши
}

function onMouseMove(event) {
  // обработка движения мыши
}

1
2
3
4
5

function onMouseDown(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  // координаты нажатия мыши относительно canvas
}