Нажимаемые изображения на холсте

Question

Я пытаюсь сделать изображения внутри холста кликабельными, но я смущен тем, как это сделать, вот что у меня есть в настоящее время, я просто хочу, чтобы изображения [0] были доступны для клики и что предупреждение появляется, как только оно нажимается, но по какой-то причине оно не работает. Как я могу сделать так, чтобы при щелчке на картинке [0] вышло предупреждение.

var images = document.getElementsByTagName("img"); 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var left = c.offsetLeft; 
var top = c.offsetTop; 
var pictures = []; 
    //wheel 
pictures[0] = new Image(); 
pictures[0].src = 'images/Layer8.png'; 
//bg 
pictures[1] = new Image(); 
pictures[1].src = 'images/Layer0.png'; 
//gear 
pictures[2] = new Image(); 
pictures[2].src = 'images/Layer7.png'; 
//speed 
pictures[3] = new Image(); 
pictures[3].src = 'images/Layer14.png'; 
//dial1 
pictures[4] = new Image(); 
pictures[4].src = 'images/Layer18.png'; 
//dial2 
pictures[5] = new Image(); 
pictures[5].src = 'images/Layer16.png'; 
//dial3 
pictures[6] = new Image(); 
pictures[6].src = 'images/Layer17.png'; 

c.addEventListener('click', function(event){ 
    var x = event.pageX - left, 
    y = event.pageY - top; 
    pictures.forEach(function(fx,fy,fwidth,fheight,x,y) { 
    if (y > fy && y < fy + fheight 
     && x > fx && x < fx + fwidth) { 
     alert('clicked an element'); 
    } 
}); 
}, false); 

function load(){ 
ctx.drawImage(pictures[1],0,0); 
ctx.drawImage(pictures[2],468,263); 
ctx.drawImage(pictures[3],89,77); 
ctx.drawImage(pictures[4],146,153); 
ctx.drawImage(pictures[5],278,153); 
ctx.drawImage(pictures[6],206,119); 
ctx.drawImage(pictures[0],fx,fy,fwidth,fheight); 

} 
var fx = 84; 
var fy = 60; 
var fwidth = 283; 
var fheight = 276; 

window.onload = load;

Answer 1

Хорошо, я понимаю, что вы пытаетесь сделать. К сожалению, изображения на холсте не являются элементами DOM, только сам холст - один. Это означает, с помощью JQuery вы можете позвонить:

$('#myCanvas').on('click', function() {}); 

или нативно:

c.addEventListener('click', function(){}); 

Однако fabricjs.com библиотека может оказаться полезной для вас в этом случае.