Diseño de escuadra.

Mi escuadra.

<!-- escuadra.html -->

<canvas width="600" height="400"></canvas>
<h2>alumna:Mireya Peña Càrcamo</h2>
<h2>PROGRAMA-ESCUADRA</h2>

<script>

    function lineasvertical(x){
        pincel.fillStyle = 'black';
        pincel.fillRect(50,x,16,4);//funcion
    }
    function lineashorizontal(){
        pincel.fillStyle= "black";
        pincel.fillRect(m,384,4,16);
    }

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(50, 400);
pincel.fill();

//primer triàngulo
pincel.fillStyle="lightgrey";
pincel.beginPath();//Instrucciòn para comenzar nuevo camino de pintura.
pincel.moveTo(50,50);// mueva pincel a la coordenada 50,50
pincel.lineTo(400,400);//instrucciòn para que genere linea del centro a 400,400 en el lienzo.
pincel.lineTo(50,400);// genere otra linea de la coordenada 50,50 al 50,400
pincel.fill();

//segundo triàngulo.
pincel.fillStyle="white";
pincel.beginPath();//Instrucciòn para comenzar nuevo camino de pintura.
pincel.moveTo(100,175);// mueva pincel a la coordenada interior 100,175
pincel.lineTo(100,350);//instrucciòn para que genere linea de coordenada 100,175 a 100 y 350en el lienzo.
pincel.lineTo(275,350);// genere otra linea de coordenada interior 100,175 al 275, 350.
pincel.fill();

//lineas horizontal llamo función.
var n=80;
for(var i=0; i<17; i++){
   lineasvertical(n);
var n=n+20; 
}
//lineas vertical llamo función.
var m=80;
for(var i=0; i<14; i++){
   lineashorizontal(m);
var m=m+20; 
}

</script>