html5 - can't add .onclick to image javascript -

html5 - can't add .onclick to image javascript -

i want draw re-create of image on top of farther down, .onclick isn't working image object. tested , works fine canvas.onclick not image 'sticky'.

code below:

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>

your event needs on canvas, not image. because when created, image object isn't automatically added dom.

and when canvas draw image, duplicates it, copies pixels itself.

so add together image dom, , hear click on canvas.

class="snippet-code-js lang-js prettyprint-override">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); }; class="snippet-code-html lang-html prettyprint-override"><canvas id="mycanvas"></canvas>

javascript html5 canvas onclick drawimage