Minha solução:
<canvas width="600" height="400"></canvas>
<script>
let tela = document.querySelector("canvas");
let pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
desenhaCirculo = (x, y, raio) => {
pincel.fillStyle = "blue";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
};
limpaTela = () => {
pincel.clearRect(0, 0, 600, 400);
};
let x = 20;
let aux = 590;
/*Bolinha vai e volta pelo limite estabelecido nas condições*/
atualizaTela = () => {
limpaTela();
// bolinha para direita
if (x < 590) {
desenhaCirculo(x, 20, 10);
x++;
}
//bolinha para a esquera
else if (x == 590) {
desenhaCirculo(aux, 20, 10);
aux--;
// valores resetados
if (aux == 20) {
x = 20;
aux = 590;
}
}
//console.log(x);
//console.log(aux)
};
setInterval(atualizaTela, 10);
</script>
