Moviendo elementos con animaciones.

Estuve detallando en el foro la diversidad o cantidad de soluciones posibles que sirven para solucionar el código, aunque algunas me confunden más que la dada por el instructor, valoro el hecho de que haya creatividad y capacidad para solucionar pero destaco el trabajo de Alura en alivianar los códigos para alcanzar los resultados.

<h1>Moviendo elementos con animaciones</h1>



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


<script>

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

        pincel.fillStyle = 'lightgrey'; //propiedad
        pincel.fillRect(0, 0, 600, 400); //function.


/*Vamos a crear una función para diseñar circunferencias.
Se puede ubicar en diversas coordenadas, y diverso tamaño pero
Lo que queremos es que la circunferencia se mueva.
Vamos a intentarlo hacerlo con un FOR.
Creamor el FOR, la variable x sustituye al 20, porque se define
en el FOR.
disenharcircunferencia(20,20,10)

    for (var x = 20; x < 600; x++){
        disenharcircunferencia(x,20,10);Pero un ciclo for no es suficiente, muy rápido, el ciclo for no es el camino.
para eso el clearRect(0, 0, 600, 400) y le pasamos las mismas coordenadas de nuestro canva

    OJO es importante como se llama a una funcíón, es importante no colocar paréntesis.

     El error de Gabriela
     setInterval(actualizarPantalla(),100);

     Debería haber hecho esto:
      setInterval(actualizarPantalla,100);

     Seguimos con nuestro objetivo para mover la circunferencia.
     Gradicar cada cierto tiempo.
     Para ello usamos setInterval (dimensionar intervalo),
     1000 significa a cada segundo.
     Creamos una función exhibirMensaje para entender lo que setInterval realiza.
Creamos una función actualizarPantalla y adentro limpiamos pantalla y diseñamos circunferencia.
     */

    function disenharcircunferencia(x,y,radio){
        pincel.fillStyle = 'blue'
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill(); //Rellena la circunferencia.
    }

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

 //OJO la variable que creamos deber ser x
 //    var = 0


  //Cuando x > 600 necesitamos invertir su sentido. Por eso recibirá el valor de -1.
 //Y cuando x < 0 la misma lógica. Antes de disenhar circunferecia en la function actualizarPantalla() {


    var x = 0
    var sentido = 1

    function actualizarPantalla() {
        limpiarPantalla();
        if (x > 600) {
            sentido = -1;
        } else if (x < 0) {
            sentido = 1;
        }

        disenharcircunferencia(x,20,10);
        disenharcircunferencia(x,280,120);

        x = x + sentido;
        //x++; después de disenharcircunferencia se requiere incremetar x pero según la variable.

    }

    //Colocamos 10 mls para que pase rápido

    setInterval(actualizarPantalla,5);


    //disenharcircunferencia(300,285,20);


</script>