Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Opa, eu fiz com booleano também, não sei se a estrutura foi a melhor, mas funcionou. Vou deixar meu código. Críticas e sugestões serão bem vindas :) Obrigado.
<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 esquerdaDireita = false;
var x = 20;
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 20, 10);
if(x==580){
esquerdaDireita=true;
}
if(x==19){
esquerdaDireita=false;
}
while (esquerdaDireita == false){
x++;
break;
}
while (esquerdaDireita==true){
x=x-1;
break;
}
}
setInterval(atualizaTela, 10);
</script>