Diseñando una escuadra. No me sale el triangulo blanco dentro del negro

Buenos días a todos! Quise realizar este ejercicio que me pareció simple pero al momento de ver el resultado no logro hacer que se vea el triángulo blanco dentro del negro. Miré la opinión del instructor para ver si me había salteado algo pero no. Alguien podría orientarme? Desde ya muchas gracias. Pego debajo mi código.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "white";
    pincel.fillRect(0,0,400,400); 

    //Primer triangulo
    pincel.fillStyle = "black"; 
    pincel.beginPath();
    pincel.moveTo(50,50);
    pincel.lineTo(50,400);
    pincel.lineTo(400,400);
    pincel.fill();

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

</script>