Quando eu acerto no meio do alvo, Não exibe o alerta.]

<canvas width="600" height="400"></canvas>
<script>
     var tela = document.querySelector('canvas')
     var pincel = tela.getContext('2d')
     pincel.fillStyle = 'grey'
     pincel.fillRect(0 , 0 , 600 , 400)


     var xAleatorio;
     var yAleatorio;

     var raio = 10



     function desenhaCirculo(x , y , raio , cor ){

        pincel.fillStyle = cor
           pincel.beginPath();
               pincel.arc(x , y , raio , 0 , 2 * Math.PI)
                   pincel.fill();
     }


    function limpaTela(){
        pincel.clearRect(0 , 0 , 600 , 400)
    }


     function desenhaAlvo(x , y){

                desenhaCirculo(x , y , raio+20 , 'red')
            desenhaCirculo(x , y , raio+10 , 'white')
       desenhaCirculo(x , y , raio , 'red')

   }

  function sorteiaPosicao(maximo){

  return Math.floor(Math.random() * maximo)  

  }



  function atualizaTela(){
  limpaTela();
  xAleatorio = sorteiaPosicao(600)
  yAleatorio = sorteiaPosicao(400)
  desenhaAlvo(xAleatorio , yAleatorio)
}

  setInterval(atualizaTela , 1000)

 function dispara(evento){
    var x = evento.pageX - tela.offSetLeft;
    var y = evento.pageY - tela.offSetTop;

    if((x > xAleatorio - raio)
      &&(x < xAleatorio + raio )
      &&(y > yAleatorio - raio)
      &&(y < yAleatorio + raio)) {
        alert('Acertou Mizeravi!!!!');

      }
 }

tela.onclick = dispara;

</script>