[Dúvida] como fazer os círculos ficarem repetindo sozinho?

Olá Giuliano, tudo ok por aí ?

Sobre a ida e volta da bolinha, na verdade você verá isso mais pra frente no curso!

Você terá um exercício sobre isso nessa aula:

• Tudo que vai, volta!

E um possível código que poderia fazer essa função de ir e voltar com a bolinha seria esse:

<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) {
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
  }

  function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);
  }
  var x = 20;
  var sentido = 1;

  function atualizaTela() {
    limpaTela();
    if (x > 600) {
      sentido = -1;
    } else if (x < 0) {
      sentido = 1;
    }
    desenhaCirculo(x, 20, 10);
    x = x + sentido;
  }
  setInterval(atualizaTela, 10);
</script>

Em síntese era isso, caso tenha mais dúvidas recorra ao fórum novamente!

Estarei à disposição.

Um grande abraço e bons estudos.

Acrescente uma linha à função (a do IF):

 function atualizaTela() {
        limpaTela();
        desenhaCirculo(x, 20, 10);
        console.log(x);
        x++;
        if (x==600) { x = 20 }
     }

Oi Renan tudo certo, obrigado pelo retorno.

Gabriel eu acrescentei somente a linha do IF e deu certo, porém no código que você mandou tem console.log(x); qual seria a função dele pois sem ele o código funcionou sem a necessidade de coloca-lo?

Pode ignorar o console.log(x).

Eu usei para verificar se os valores estavam sendo lidos e exibidos de forma correta.

Às vezes usamos este recurso para verificar os valores de variáveis e funções durante a execução do código.

Neste caso eu queria saber qual era o valor de x quando a bola sumia.