Clase: canva 3 cuadrados verdes

<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);
    }

    dibujarCuadrado(0,0,"green");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"green");




</script>