Me costo algo lograrlo y note mi carencia matemática

<meta charset="utf-8">
<h1>Funciones que dibujan</h1>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var pantalla = document.querySelector("#canvas");
    var pincel = pantalla.getContext("2d");
    //pintar fondo gris
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    // Funciones
    // Dibujar una circunferencia
    function dibujarCirculo(x, y, radio, color) {

        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fillStyle = color;
        pincel.fill();
    }
    //funcion para limpiar la pantalla
    function limpiarPantalla() {
        pincel.clearRect(0, 0, 600, 400);
    }
    //funcion animacion de circulo por segundo, hacia adelante  y al sentido contrario
    var x = 0;
    function animacionCirculo(){
        limpiarPantalla();
        dibujarCirculo(x, 30, 30, "red");
        x += 1;
        //si x es mayor que el ancho de la pantalla, vuelva hacia atras en x


        if (x > 600) {
            animacionHaciaAtras(x);
        } 
    }

    function animacionHaciaAtras(r){
        limpiarPantalla();
        var e = r-600;
        dibujarCirculo(600-e, 30, 30, "red");
        if (e > 600) {
         x =  0;
        }
    }

        setInterval(animacionCirculo, 10);




</script>