Clase iteracciones fantásticas

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

<script>

    //usando una cordenada(x)
    /*function dibujarCuadradoVerde(x){

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

       pincel.fillStyle= "green";  
       pincel.fillRect(x,0,50,50);  
       pincel.strokeStyle="black"; 
       pincel.strokeRect(x,0,50,50);
    }
*/

    /*No es la mejor opción, debemos hacer una función para agilizar
    pincel.fillRect(50,0,50,50);  
    pincel.strokeRect (50,0,50,50);  

    pincel.fillRect(100,0,50,50);  
    pincel.strokeRect (100,0,50,50); 

    pincel.fillRect(150,0,50,50);  
    pincel.strokeRect (150,0,50,50);  

    pincel.fillRect(200,0,50,50);  
    pincel.strokeRect (200,0,50,50); */

    //Acá usamos dos cordenadas (x,y) semáforo
    /*function dibujarCuadradoRojo(x,y){

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

       pincel.fillStyle= "red";  
       pincel.fillRect(x,y,50,50);  
       pincel.strokeStyle="black"; 
       pincel.strokeRect(x,y,50,50);
    }

    function dibujarCuadradoAmarillo(x,y){

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

       pincel.fillStyle= "yellow";  
       pincel.fillRect(x,y,50,50);  
       pincel.strokeStyle="black"; /
       pincel.strokeRect(x,y,50,50);
    }

    function dibujarCuadradoVerde(x,y){

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

       pincel.fillStyle= "green";  
       pincel.fillRect(x,y,50,50);  
       pincel.strokeStyle="black"; 
       pincel.strokeRect(x,y,50,50);
    }

       dibujarCuadradoRojo(0,0);
       dibujarCuadradoAmarillo(0,50);
       dibujarCuadradoVerde(0,100);*/

    //Ahora vamos a simplificar más el código. ponemos el color como parámetro
    /*function dibujarCuadrado(x,y,color){

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

       pincel.fillStyle= color;  
       pincel.fillRect(x,y,50,50);  
       pincel.strokeStyle="black"; 
       pincel.strokeRect(x,y,50,50);
    }

    dibujarCuadrado(0,0,"red");
    dibujarCuadrado(0,50,"yellow");
    dibujarCuadrado(0,100,"green");*/

    //Nuestro objetivo era colocar cuadrados verdes en horizontal

    function dibujarCuadrado(x,y,color){

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

       pincel.fillStyle= color;  
       pincel.fillRect(x,y,50,50);  
       pincel.strokeStyle="black"; 
       pincel.strokeRect(x,y,50,50);
    }

    /* Si queremos que los cuadrados ocupen todo el width="600", deberíamos repetir código. 
    dibujarCuadrado(0,0,"green");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"green");
      */

    //Iteracción con WHILE
    /*var x = 0;
    while(x < 600){
        dibujarCuadrado(x,0,"green");
        x = x + 50;

    }*/

    //Ahora vamos a que tenga tres líneas y cada una con un color diferente.

    /*var x = 0;
    while(x < 600){
        dibujarCuadrado(x,0,"red");
        dibujarCuadrado(x,50,"yellow");
        dibujarCuadrado(x,100,"green");
        x = x + 50;

    }*/

    //Vaqmos a realizar el loop con FOR
    for (var x = 0; x < 600; x = x + 50){

        dibujarCuadrado(x,0,"red");
        dibujarCuadrado(x,50,"yellow");
        dibujarCuadrado(x,100,"green");
    }



</script>