Oi Amanda! Ficou bom, mas sem (console.log(evento.pageX); e o (console.log(evento.pageY);) o Código funciona da mesma forma... (no Firefox).

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

<script>

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

    pincel.fillStyle = 'lightgray';
    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'); // maior círculo
    desenhaCirculo(300,200, raio + 10, 'white');
    desenhaCirculo(300,200, raio, 'red'); // menor circulo

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

       // lógica de acerto?

        var x1 = (x > 289 );
        var x2 = (x < 311 );
        var y1 = (y > 189 );
        var y2 = (y < 211 );

       if ((x1 & x2) == true){

       }  if ((y1 & y2) == true){
           alert('você acertou!');
       } 
    }

    tela.onclick = dispara;

</script>

Oi Marcos, obrigada! ^^ Acabei dando uma limpada, acho que ficou melhor.

O que fiquei em dúvida depois é que me falaram não por eu ter declarado como verdadeiro e falso ele não compara os números. Fiquei na dúvida se o código está certo.. :\

Sei que não "existe" um certo e errado, mas é meio ruim fazer as cegas, sem ngm te aponta algo errado, nem sempre um código que roda está certo. :(

Segue novo cód. :

<canvas width="600" height="400"></canvas>
<meta charset="UTF-8">

<script>

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

    pincel.fillStyle = 'lightgray';
    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'); // maior círculo
    desenhaCirculo(300,200, raio + 10, 'white');
    desenhaCirculo(300,200, raio, 'red'); // menor circulo

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        var x1 = (x > 289 ) && (x < 311);
        var y1 = (y > 189 ) && (y < 211 ) ;

       if (x1 == true && y1 == true ){
         alert('você acertou!');
         console.log(x);
         console.log(y);
       } 
    }
tela.onclick = dispara;

</script>

Não sou especialista mas aprendam sempre a criar o minimo de variavel possiveis, pois quanto mais, mas pesado será para rodar "pois a maquina vai ter que acessar o endereço de memória para achar o conteúdo da variarel ", e se tratando dos futuro programas que criaremos e bom ter isso sempre em mente. Mas ótima lógica a de vocês sou aluno também e gosto de fazer e depois olhar o fórum para aprender novas formas, vou deixar a minha aqui também.

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

<script>

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

    pincel.fillStyle = 'lightgray';
    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'); // maior círculo
    desenhaCirculo(300,200, raio + 10, 'white');
    desenhaCirculo(300,200, raio, 'red'); // menor circulo

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;


        //usei o operador logico and "&&" para testar x e y atendem os requisitos 
        if(300 < x+10 && 300 > x-10 && 200 < y+10 && 200 > y-10){
            alert("voce acertou no alvo")
        }
    }

    tela.onclick = dispara;

</script>

Obrigada pela dica Felipe! Ótimo cód. ^^