Как обнаружить мышь на холсте ⇐ Jquery

[Anonymous]

Я использую userscript, который переопределяет CanvasRenderingContext2d.prototype.Drawimage, чтобы заменить конкретное изображение (OldImg.png) на пользовательское изображение (newimg.png), когда оно отображается на холме. Я хотел бы обнаружить, когда мышь пользователя колеблется над областью, где нарисовано новое изображение, и запускает предупреждение («Hello World»). Поскольку изображение нарисовано на холсте (не обычный элемент DOM), какой лучший способ обнаружить зависание взаимодействия с этой конкретной областью изображения? Я пробовал много традиционных маршрутов, чтобы выбрать элементы DOM, но они не работали из -за того, что новое изображение нарисовано на холсте. < /P>
(function() {
'use strict';

var coinImageWhite = new Image(500, 500);
coinImageWhite.src = 'https://agma.io/skins/newimg.png'
var coinImageBlack = new Image(500, 500);
coinImageBlack.src = 'https://agma.io/skins/newimg.png'

var rawSettings = localStorage.getItem('settings');
var settings = JSON.parse(rawSettings);

var originalDrawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (image, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight) {
if ((image.src != undefined)) {

if (image.src == 'https://agma.io/skins/oldimg.png' || image.src == 'https://agma.io/skins/oldimg.png') {

if (settings.sDark) {
arguments[0] = coinImageBlack;
console.log("yo");
} else {
arguments[0] = coinImageWhite;
console.log("yo");
}
}
}

return originalDrawImage.apply(this, arguments);
}

console.log('Script loaded');
})();


Подробнее здесь: https://stackoverflow.com/questions/797 ... ver-canvas