Для обработки событий мыши нужно подключить слушатель. Есть два способа. Первый способ.
canvas.onmousedown = function (e) {
// Код для нажатия мыши
};
Второй способ - подключаем через addEventListener(). Данный способ пригодится, когда нужно добавить несколько слушателей к одному событию.
canvas.addEventListener('mousedown', function (e) {
// Код для нажатия мыши
});
Аналогично обрабатываются другие события - onmousemove, onmouseup, onmouseover и onmouseout.
При обработке событий мыши мы получаем координаты курсора относительно всего окна (объект window). Поэтому следует преобразовывать координаты мыши относительно canvas.
Поместим изображение на холст и будем получать координаты мыши при её движении.
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
canvas.onmousemove = function (e) {
var loc = windowToCanvas(canvas, e.clientX, e.clientY);
drawBackground();
drawSpritesheet();
drawGuidelines(loc.x, loc.y);
updateReadout(loc.x, loc.y);
};