не может добавить .onclick to image javascript

Question

Я хочу нарисовать копию этого изображения поверх него, но дальше вниз, но .onclick не работает для моего объекта изображения. Я тестировал его уже, и он отлично работает с canvas.onclick, но не с моим изображением «липким».

код ниже:

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext("2d"); 

var sticky = new Image(); 
sticky.src = "sticky.png"; 
sticky.onload = function() { 

    context.drawImage(sticky, 0, 0); 
}; 

sticky.onclick = function() { 

    context.drawImage(sticky, 0, 100); 
}; 

</script> 

Answer 1

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

И когда изображение холста draw, оно дублирует его, оно копирует пиксели в себя.

Так что добавьте свое изображение в дом и слушайте клик на своем холсте. не

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext("2d"); 
 
var sticky = new Image(); 
 
var sticky2 = new Image(); 
 

 
sticky.src = "http://lorempixel.com/250/60/"; 
 
sticky2.src = "http://lorempixel.com/150/60/"; 
 

 
sticky.onload = function() { 
 
    context.drawImage(sticky, 0, 0); 
 
}; 
 

 
canvas.onclick = function() { 
 
    context.drawImage(sticky2, 0, 100); 
 
};

<canvas id="myCanvas"></canvas>