Lo realizado en clase

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


</canvas>

<script>

    var pantalla = document.querySelector("canvas");// conectar java con html mendiante la pestaña canvas
    var pincel = pantalla.getContext("2d");// obteniendo todo el contenido de pantalla 




    function dibujarCuadradoRojo(x,y) {
        // body...


        pincel.fillStyle = "red";//propiedad
        pincel.fillRect(x,y,50,50);//funcion

            // damos un borde
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);



    }
    function dibujarCuadradoAmarillo(x,y) {
        // body...


        pincel.fillStyle = "yellow";//propiedad
        pincel.fillRect(x,y,50,50);//funcion

            // damos un borde
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);



    }

    function dibujarCuadrado(x,y,color) {
        // body...


        pincel.fillStyle = color;//propiedad
        pincel.fillRect(x,y,50,50);//funcion

            // damos un borde
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);



    }

    /*

    var x = 0;

    while (x<600){

        dibujarCuadrado(x,0,"green");

        x = x +50;


    }

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

*/

    for (var x=0; x <600 ; x =x +50){


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








</script>