Duda: Intente hacer que regresara el circulo pero algo falla en mi código

Lo que quiero es que vaya de la coordenada x=0 a x=200, después regresar y así sucesivamente. Pero lo que pasa es que rebota como loco el círculo ¿por qué pasa eso? Gracias de antemano.

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

<script>    
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    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);
    }

    var x = 0;

    function actualizarPantallaida(){
    limpiarPantalla();       
    disenharCircunferencia(x,20,10);
    x=x+1;
    if (x>=200){
        setInterval(actualizarPantallavue,10);
            }



    }
    setInterval(actualizarPantallaida,10);

    function actualizarPantallavue(){

        limpiarPantalla();
        disenharCircunferencia(x,20,10);

        x=x-1;
        if(x<1){
        setInterval(actualizarPantallaida,10);
    }


    }
    </script>