!Ya que va, que vuelva¡

<canvas width="600px" height="400px"></canvas>


<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,600,400);

    function disenharCircunferencia(x,y,radio) {
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();

    }

    function limpiarPantalla() {
        pincel.clearRect(0,0,600,400);
    }

    function actualizarPantallaDerecha() {                              
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x++;      
        if (x == 580) {
            clearInterval(derecha);                                     //detiene el timer cuando x == 580
            izquierda = setInterval(actualizarPantallaIzquierda,10);    //Inicia al lado izquierdo con un conteo regresivo
        }
    }

    function actualizarPantallaIzquierda() { 
        limpiarPantalla();
        disenharCircunferencia(x,20,10);
        x--;
        if (x == 20) {
            clearInterval(izquierda);                                                           //detiene el timer cuando x == 20
            derecha = setInterval(actualizarPantallaDerecha,10);        //Inicia nuevamente al lado derecho con un conteo ascendente.
        }
    }

    var x = 20;
    var izquierda;
    var derecha = setInterval(actualizarPantallaDerecha,10);

    //Las dos funciones de actualizar en conjunto, generan un ciclo infinito donde una desactiva y activa la otra y viceversa.

</script>