va y viene

¡Hola Daniel!

Viendo tu código, parece que estás tratando de crear una animación en la que una circunferencia se mueve de izquierda a derecha y viceversa. Sin embargo, parece que hay un pequeño problema en tu código.

En la función "actualizarPantalla", estás usando una variable llamada "direccion" que no ha sido declarada en ningún lugar. Para solucionar esto, puedes agregar una variable "direccion" al principio de tu código y establecerla en 1 para que la circunferencia se mueva inicialmente hacia la derecha.

Aquí te dejo el código actualizado con esta corrección:

<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 disenarCircunferencia(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 direccion = 1;

    function actualizarPantalla(){
        limpiarPantalla();

        // Si llega al borde derecho, cambiar dirección a izquierda
        if (x >= pantalla.width) {
            direccion = -1;
        }
    
        // Si llega al borde izquierdo, cambiar dirección a derecha
        if (x <= 0) {
            direccion = 1;
        }
    
        x += direccion;
    
        disenarCircunferencia(x,20,10);
    }

    setInterval(actualizarPantalla,5);

   //disenarCircunferencia(20,20,10));
    
</script>

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!