onClick on the canvas is not called in some area

I made two tags video and canvas.

Video tag is not available on this browser

Then I copied every frame of video on canvas.

Consequently , I can play the video on canvas.

then I want to use the onclick event on the canvas.

var v = document.getElementById("mainVideo");
var canvas=document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

v.addEventListener( "loadedmetadata", function(e){
  // when video is loaded in video tag, the animation start.
    requestAnimationFrame(animate);
    v.addEventListener('play', function(){
        console.log("played");
        requestAnimationFrame(animate);
    },false);
}, false ); 

function animate(time){
    context.drawImage(v,50,50,150,150);
    requestAnimationFrame(animate);
}

canvas.addEventListener('click', onClick, false);

function onClick (e) {  
   // when you click on canvas,normally onclick is called, but in some area it's not called.
}

When I click on canvas, sometimes onClick is called but in some area it's not called. And area is not stable.

Why does it happen??