Обнаружение мыши над различными формами на холсте JS

Question

Как я могу получить путь нарисованный холст?JSON рисует мне более 30 прямоугольников, но как я могу обратиться к приведенной ниже функции наведения на изменение моего фона после наведения на определенный нарисованный холст?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.7;
var grd = ctx.createLinearGradient(150, 2, 300, 200);
grd.addColorStop(0, "red");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(200,200,200,200); 

$(canvas).hover(function() {
  $(this).css("background-color", "yellow");
  console.log(ctx);
},function() {
  $(this).css("background-color", "");
});

^ вот как это выглядит.

Я хочу изменить фон, когда мышь находится на нарисованных элементах

Answer 1

Вам потребуется либо кодировать пиксели цветом, либо следить за нарисованными прямоугольниками, а затем выполнять проверку столкновения точки с прямоугольником при движении мыши.

Возможно, использование SVG вместо canvas облегчит вашу задачу, поскольку элементы SVG могут генерировать события по отдельности.