<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>