Qual o ERRO?

Olá Ana, beleza?

Tomei a liberdade de editar o seu código, segue:

<canvas  width='500' height='550' > </canvas>


<script>

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

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,500,550);

    var raio = 10;
    var xAleatorio;
    var yAleatorio;

    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, 500, 550);
        }

    function desenhaAlvo(x, y){
    desenhaCirculo(x, y, raio + 20, "red"); // começar pela maior de todas
    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(500);
        yAleatorio = sorteiaPosicao(550);
        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!");

        }


    }


    tela.onclick = dispara;


</script>

1. Não aparece nada quando abro o html. Vc tinha um erro no IF, o que quebrava a página e não deixava aparecer nada , estava assim:

        if(x > xAleatorio - raio) && (x < xAleatorio + raio) && ( y > yAleatorio - raio) && (y < yAleatorio + raio) {

            alert("Acertou!");

        }

Note que falta um parênteses no inicio e no fim "agrupando" todas as condições "E" (&&) que vc especificou. O correto é:

        if((x > xAleatorio - raio) && (x < xAleatorio + raio) && ( y > yAleatorio - raio) && (y < yAleatorio + raio)) {

            alert("Acertou!");

        }

Dica: Abrir o "inspecionador de elemento" no Google Chrome é "CTRL+SHIFT+I", pode te ajudar a encontrar o erro do código, é só olhar na aba de "Console"

2- Como faço para aumentar meu canvas? O limite da minha tela é 300 por 150, mesmo que eu aumente no site nao aumenta. Como devo proceder?

*Para isso vc precisava alterar em todos os lugares que vc deixa os diâmetros configurados, segue: *

HTML:

<canvas  width='500' height='550' > </canvas>

SCRIPT

pincel.fillRect(0,0,500,550);

function limpaTela(){

    pincel.clearRect(0,0, 500, 550);
}

function  atualizaTela(){

    limpaTela();
    xAleatorio = sorteiaPosicao(500);
    yAleatorio = sorteiaPosicao(550);
    desenhaAlvo(xAleatorio, yAleatorio);

}

Acredito que é isso.

Abraços!

Olá, obrigada pela ajuda no If.

Em relação ao tamanho do CANVAS, nao adianta eu colocar 500, 600, 400... mesmo colocando esses valores ele fica pequeno. O valor maximo que consigo é 300, 150. Queria saber se tem como aumentar isso no meu Chrome, porque parece que meu chrome me limita a esse tamanho de CANVAS.