<canvas width="500" height="500"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pencil = pantalla.getContext("2d");
// Triangulo principal
pencil.fillStyle= "black";
pencil.moveTo(50,50);
pencil.lineTo(50,400);
pencil.lineTo(400,400);
pencil.fill();
// triangulo Secundario
pencil.fillStyle = "white";
pencil.beginPath();
pencil.moveTo(100,175);
pencil.lineTo(100,350);
pencil.lineTo(275,350);
pencil.fill();
</script>
