javascript - Image inside canvas: distinguish onclick inside image and outside image (but inside canvas) -

edited question , code: if use return statement in function move_background() , save image inside var imageobj suggested, code still not working , plays sound2 both when inside , outside image (sound 3 correctly played when outside canvas though), ideas why?

</script>  <canvas id="mycanvas" width="400" height="400" style="border:1px solid white;" onclick="myfunct()"></canvas>  <!-- audio source specified later--> <audio id="audio"></audio>  <style>     #mycanvas { position: absolute;     top:0;     bottom: 0;     left: 0;     right: 0;     margin:auto; } </style>  <script>      var canvas=document.getelementbyid("mycanvas");          context = canvas.getcontext('2d');     var imageobj = make_background();      function make_background()     {        img =  new image();;       img.src="img.gif";       img.id = "myimage";       img.onload = function(){         context.drawimage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);       }       return img     }        function play(){          var audio = document.getelementbyid("audio");          audio.play();       }          function myfunct() {           var audio = document.getelementbyid("audio");           // play different sound if answer right or wrong           document.addeventlistener("click", function(e){              if(e.target == imageobj){ // inside canvas , inside image                audio.src = "sound1.mp3";                audio.play();              }              else if (e.target === canvas && e.target !== imageobj) { // inside canvas outside image                 audio.src = "sound2.mp3";                 audio.play();              }              else{                audio.src = "sound3.mp3";                audio.play();              }           // generate random location           var x = math.floor(math.random()*300);           var y = math.floor(math.random()*300);           var obj = document.getelementbyid("mycanvas");           obj.style.top = x + "px";           obj.style.left = y + "px";           obj.style.bottom = x - "px";           obj.style.right = y - "px";           },false);                }     </script> 

original question , code: have rect canvas , image in center. play different audio file when click inside canvas (but outside image) , when click inside image. have now

<canvas id="mycanvas" width="400" height="400" style="border:1px solid white;" onclick="myfunct()"></canvas> <!-- audio source specified later--> <audio id="audio"></audio> <script>         var canvas=document.getelementbyid("mycanvas");         context = canvas.getcontext('2d');         make_background();          function make_background()         {           img = new image();           img.src = 'img.gif';           img.onload = function(){           context.drawimage(img, 100, 100);       }     }      function play(){        var audio = document.getelementbyid("audio");        audio.play();     }      function myfunct() {         var audio = document.getelementbyid("audio");         var canv = document.getelementbyid("mycanvas");         document.addeventlistener("click", function(e){            if( inside canvas , inside img){              audio.src = "sound1.mp3";              audio.play();            }            else if (inside canvas , outside img) {                  audio.src = "sound2.mp3";                 audio.play();            }            else{              audio.src = "sound3.mp3";              audio.play();            }         },false);                } </script> 

to start word of caution myfunct call bind multiple click events document every time click canvas. have edited fiddle achieve looking for. please let me know if helps.

<canvas id="mycanvas" width="400" height="400" style="border:1px solid white;" onclick="myfunct(event)"></canvas> <!-- audio source specified later--> <audio id="audio"></audio> <script>     var canvas=document.getelementbyid("mycanvas");         context = canvas.getcontext('2d');         var imageobj = make_background();         function make_background()         {           img = new image();           img.src = 'http://placehold.it/100x100';           img.onload = function(){           context.drawimage(img, 100, 100);       }       return img;     }      function play(){        var audio = document.getelementbyid("audio");        audio.play();     }      function myfunct(e) {         var audio = document.getelementbyid("audio");         var canv = document.getelementbyid("mycanvas");            if( e.clientx > 100 && e.clientx < 100 + imageobj.width && e.clienty > 100 && e.clienty < 100 + imageobj.height){             console.log('inside image , canvas');              //audio.src = "sound1.mp3";              //audio.play();            }            else if (e.clientx > 400 || e.clienty > 400) {             // outside canvas                 console.log('outside canvas');                 //audio.src = "sound2.mp3";                 //audio.play();            }            else{             console.log('inside canvas outside image');              //audio.src = "sound3.mp3";              //audio.play();            }         } </script>