Desenho da esquadra!!

Realizada a criação da função, trinâgulo maior foi fácil de fazer, mas o segundo para da certo tive que colar mesmo... hehehehe

<meta charset="utf-8">

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

<script type="text/javascript">


function desenhoEsquadra(xa,ya,xc,yc,cor){
    var  tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.moveTo(xa,ya); //posição do desenho como um todo
    pincel.lineTo(xa,yc); //linha diagonal 
    pincel.lineTo(xc,yc); //linhas 
    pincel.fill();

    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo((xa*7 + xc)/7,(9*ya + 5*yc)/14);     // posição do desenho como um todo
    pincel.lineTo((xa*7 + xc)/7,(ya + 6*yc)/7); // linhas horinzotais do lado direito
    pincel.lineTo(5*xa,9*xc)/14,(ya + 6*yc)/7;  // linhas horizontal do lado esquerdo
    pincel.fill();
}

desenhoEsquadra(50,50,400,400, 'black');


</script>