Как обнаружить мышь на холсте ⇐ 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');
})();

< /code>
Я попытался добавить логику для отслеживания позиции и размера каждого замененного изображения, когда оно нарисовано на холсте, и слушатель MouseMove Event, который проверяет, колеблется ли курсор пользователя над любой из этих областей изображения, что проверяет предупреждение, когда это произойдет. Это код: < /p>
(function () {
'use strict';

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

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

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

let imageHitboxes = []; // Store where the image was drawn

const originalDrawImage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function (
image,
sourceX, sourceY, sourceWidth, sourceHeight,
targetX, targetY, targetWidth, targetHeight
) {
// Check if we're replacing the target image
if (image?.src?.includes('oldimg.png')) {
const replacement = settings?.sDark ? coinImageBlack : coinImageWhite;
arguments[0] = replacement;

// Save the bounding box of the drawn image
imageHitboxes.push({
x: targetX,
y: targetY,
width: targetWidth,
height: targetHeight
});
}

return originalDrawImage.apply(this, arguments);
};

// Attach mousemove listener to the canvas
window.addEventListener('load', () => {
const canvas = document.querySelector('canvas');
if (!canvas) return;

canvas.addEventListener('mousemove', function (e) {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;

for (const box of imageHitboxes) {
if (
mouseX >= box.x &&
mouseX = box.y &&
mouseY

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