Minha resolução

<meta charset="UTF-8">

08 - Esquadro #2. <br><br>

<canvas width="800" height="600"></canvas>

<script>

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

        pincel.fillStyle = 'SteelBlue';
        pincel.fillRect(0,0,500,450);

    function desenhaTriangulo(xa, ya, xc, yc, cor) {    
    // as coodernadas dos triângulos que estão no mesmo eixo(x,y), são atrbuídas uma única vez

            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.moveTo(xa, ya);
            pincel.lineTo(xa, yc);
            pincel.lineTo(xc, yc);
            pincel.fill();
    }

            desenhaTriangulo(50, 50, 400, 400, 'black'); // triângulo maior
            desenhaTriangulo(100, 175, 275, 350, 'white'); // triângulo menor

</script>