Ya que va, ya que vuelva (04)

Tuve una idea rápida de usar if para hacer que "rebotara", mi problema fue que tarde bastante en darme cuenta que la variable que utilice debía ir fuera de la función. Comparado con la respuesta del profesor no es tan prolijo, pero al menos funciona.

<meta charset="UTF-8">

<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
    var ida = false

    function actualizarPantalla(){

        if(ida == false){
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x++;
            if(x == 600){
                ida = true;
            }
        }
        if(ida == true){
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            x--;
            if(x == 0){
                ida = false
            }
        }
    }

    setInterval(actualizarPantalla,5);
</script>