Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fiz de maneira diferente e deu certo

Quando estou assistindo a video aula e sei que ele vai fazer algum passo, eu costumo pausar e fazer antes dele para treinar e depois ver se acertei. Quando ele foi criar a função atualizaTela(), ele crirou variáveis para definir o limite máximo que o Math.random ia ir em pixels. Criei de uma forma diferente e deu certo, fiz direto a função com Math.random()*600 e *400 em x, y respectivamente. Deu certo, posso manter assim né? utilizei menos código, não sei se funciona pra todos os casos mas funcionou agora:

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

    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, 30, "red");
    desenhaCirculo(x, y, 20,"white");
    desenhaCirculo(x, y, 10, "red");

    }

    function alvoAleatorio(){

        desenhaAlvo(Math.random()*600 ,Math.random()*400);

    }

    function atualizaTela(){

        limpaTela();
        alvoAleatorio();
    }

    setInterval(atualizaTela, 1000);


</script>
1 resposta
solução!

se fez diferente e deu certo está ok, existe diferentes caminhos para o mesmo resultado.