Confesso que mais uma vez precisei olhar um pedaço da resposta para poder construir o resto, persiste minha dificuldade de saber como começar.
<canvas width="600" height="400"> </canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
// triângulo maior
pincel.fillStyle="black";
pincel.beginPath();
pincel.moveTo(50,50);
pincel.lineTo(50,400);
pincel.lineTo(400, 400);
pincel.fill();
// triângulo menor
pincel.fillStyle="white";
pincel.beginPath();
pincel.moveTo(100,175);
pincel.lineTo(100,350);
pincel.lineTo(275, 350);
pincel.fill();
</script>
