<canvas width="600" height="500"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'gray';
pincel.fillRect(0,0,600,400);
function desenhaBolinha(x,y,raio){
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x,y,raio,0,2*Math.PI);
pincel.fill();
limpaTela;
}
function limpaTela(){
pincel.clearRect(0,0,600,400);
}
var x = 20;
var ida = true;
function atualizaTela(){
limpaTela();
desenhaBolinha(x,20,10);
if(ida && x < 590){
x++;
}
else if(x > 10) {
ida = false;
x--;
} else{
ida = true;
}
}
setInterval(atualizaTela,10);
</script>