Não exibe nada, me ajudem a encontrar onde está o erro? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

1
resposta

por Fabiana Balduína

| 22.5k xp | 26 posts

Não está exibindo o alvo, não consigo encontrar o erro.

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

  }

  desenhaCirculo(100,100, raio+20,'red');
  desenhaCirculo(100,100, raio+10,'white');
  desenhaCirculo(100,100, raio,'red');

</script>

1 resposta

por Guilherme Henrique

| 733.8k xp | 2109 posts

Instrutor

03/10/2022

Oi Fabiana

Está dando erro de variável raio não definida, e realmente no momento que você chama a função está inserindo raio+10 por exemplo ai a variável raio não existe. É preciso ou declarar o raio ou inserir os valores direto assim:

  desenhaCirculo(100,100, 90,'red');
  desenhaCirculo(100,100, 60,'white');
  desenhaCirculo(100,100, 30,'red');

Parabéns pelo empenho nos estudos.

Continue praticando e qualquer dúvida pode contar com a gente.