Sugestão de Código

<canvas width = '600' height = '400'> </canvas>

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

var xPontoInicial = [50, 100];
var yPontoInicial = [50, 175];
var xc = [400, 275];
var yc = [400, 350];
var cor = ['black', 'white'];

function desenhaEsquadro(xPontoInicial, yPontoInicial, xc, yc, cor) 
{
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.moveTo(xPontoInicial, yPontoInicial);
    pincel.lineTo(xPontoInicial, yc);
    pincel.lineTo(xc, yc);
    pincel.fill();
}

//TRIÂNGULO MAIOR OU PROPRIAMENTE O ESQUADRO

desenhaEsquadro(xPontoInicial[0], yPontoInicial[0], xc[0], yc[0], cor[0]);

//TRIÂNGULO VAZADO DO ESQUADRO

desenhaEsquadro(xPontoInicial[1], yPontoInicial[1], xc[1], yc[1], cor[1]);

</script>