html5: how to handle canvas child clicked event? -

this question has answer here:

• how add simple onclick event handler canvas element? 4 answers

<canvas id="mycanvas" width="578" height="400"></canvas> <script>   var canvas = document.getelementbyid('mycanvas');   var context = canvas.getcontext('2d');   var imageobj = new image();   imageobj.onload = function() {     context.drawimage(imageobj, 128, 128);   };   imageobj.src = 'http://xxx/yyy/zzz.jpg'; </script> 

how can notified or hooked event handler, when imageobj, child of canvas object (not canvas) clicked?

the way this, handling click event of canvas, , figure out part of canvas clicked:

canvas.addeventlistener("mouseup", domouseclick, false);  var domouseclick = function(event)  {    //some magic have exact coordinates in canvas:    var clickpos = {      x : event.clientx + document.body.scrollleft + document.documentelement.scrollleft - math.floor($(canvas).offset().left);,      y : event.clienty + document.body.scrolltop + document.documentelement.scrolltop - math.floor($(canvas).offset().top) + 1     }     //check image    if (clickpos.x > 128 && clickpos.y < 128 + imageobj.width        && clickpos.y > 128 && clickpos.y < 128 + imageobj.height){       console.log("oh boy! clicked image!");    }  } 

the reason why have way, because don't "add" image child canvas, "draw" on canvas. canvas shows pixels , has no idea drawn.