Olá pessoal, estou colocando meu código aqui com comentários. Coloquei da forma que entendi a linha de acontecimentos e caso alguém tenha formas de deixar o código mais limpo e se tiver algum comentário equivocado me avise para eu entender certo blz.
<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();
}
// apaga os elementos da tela e deixa um quadro branco novamente
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
// variavel que representa o eixo x da bola, chamada fora da função pois será atualizada e somada +1 a cada periodo de tempo posteriormente na função atualizaTela.
var x = 20;
// variavel para testar se a bolinha chegou ao limite do canvas no eixo X.
var voltaBola = true
// Função que representa a condição de seguida e parada da variavel voltaBola. No caso o limite de 600 no eixo X. Enquanto esse resultado não é atingido, uma nova bolinha é gerada no eixo x e somado 1px.
function atualizaTela() {
if ( voltaBola == false){
limpaTela();
desenhaCirculo(x, 20, 10);
x++;
if(x == 600){
voltaBola = true
}
}else{
// Quando a variável voltaBola atingir a condição TRUE (600 no eixo x), será desenhada uma nova bolinha porém agora subtraindo 1px no eixo X.
limpaTela();
desenhaCirculo(x, 20, 10);
x--;
// Quando a bolinha chegar no 0 do eixo x então a condição voltaBola será falsa e voltamos à condição do segundo if da função, estabelecendo um loop.
if(x == 0){
voltaBola = false
}
}
}
// Nome da função que queremos que o javascript chame e o respectivo intervalo de tempo em millisegundos.
setInterval(atualizaTela, 5);
</script>