Mi ejemplo de Escuadras

aqui esta la solucion que yo tome

<!-- Crear una pantalla pra dibujar o graficar  -->
<canvas width="600" height="400"> <!-- Ancho y alto  --> </canvas>

<script>
  //conectar html con el scrip
  var pantalla = document.querySelector('canvas');

  //crear pincel
  var pincel = pantalla.getContext('2d');

  //para definir el color de fondo de nuestra canva
  pincel.fillStyle = 'lightgrey';
  //funcion de llenar rectangulo
  // X  Y   X    Y     Inicio - lo que abarcará
  pincel.fillRect(0, 0, 600, 600); //pasar propiedad

  //para definir el color del primer lienzo
  pincel.fillStyle = 'black';
  pincel.beginPath();
  pincel.moveTo(50,50);
  pincel.lineTo(50,400);
  pincel.lineTo(400,400);
  pincel.lineTo(50,50);
  pincel.fill();

  //triangulo blanco 
  pincel.fillStyle= "White";
  pincel.beginPath();
  pincel.moveTo(100,175);
  pincel.lineTo(100,350);
  pincel.lineTo(275,350);
  pincel.lineTo(100,175);
  pincel.fill();

</script>