[Proyecto] Circulo que rebota de izquierda a derecha

Hola compañeros. Este fue mi desarrollo del problema del circulo que rebota de izquierda a derecha. Utilicé una variable de valor true que cuando llegaba al borde cambiaba a false y rebotaba el circulo. No fue igual al desarrollo del profesor pero fue mi lógica. Un saludo a todos.

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

<script>

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

    function fondo(){
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);};

    var avance = 0;
    var vuelta = true;

    function dibujarCirculo(x, y, radio) {

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * 3.14);
        pincel.fill();
    }

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

        if(vuelta){        
        limpiarPantalla();
        fondo();
        dibujarCirculo(avance,20,10);
        avance= avance + 1;
        if(avance == 600){
            vuelta= false;
        }
        }else{
        limpiarPantalla();
        fondo();
        dibujarCirculo(avance,20,10);
        avance= avance - 1; 
        if(avance ==0){
            vuelta= true;
        }
        }

    }

    setInterval(avanzar, 5);

    // setInterval(function () {


    // console.log('Esta función se ejecuta cada segundo.');

    // }, 350);

</script>