<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle="ligthgrey";
pincel.fillRect(0,0,600,400);
function desenhaBolinha(x,y,raio) {
pincel.fillStyle = "pink";
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 x2=580;
function atualizaTela() {
if (x<=580) {
limpaTela();
desenhaBolinha(x,20,10);
x++;
}
else if (x2>=20) {
limpaTela();
desenhaBolinha(x2,20,10);
x2--;
}
else {
x=20;
x2=580;
}
}
setInterval(atualizaTela,10);
</script>