Acertando o alvo

<meta charset="utf-8">

<canvas width="600" height="400" ></canvas>

<script type="text/javascript">

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'gray';
    pincel.fillRect(0,0,600,400);

    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();
    }

    desenhaCirculo(300,200, raio + 20,'red');

    desenhaCirculo(300,200, raio + 10,'white');
    desenhaCirculo(300,200,    raio,'red');

    function dispara(evento,){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;


        if (x > 290 && x < 310 && y > 190 && y < 210) {
            desenhaCirculo(300,200, raio + 20,'blue');
            desenhaCirculo(300,200, raio + 10,'yellow');
            desenhaCirculo(300,200,    raio,'green');

            alert('Você acertou o alvo!');
        }    
    }

    tela.onclick = dispara;


</script>