Desenha esquadro, fiz uns incrementos.

<canvas width="600" height="400"></canvas>
<script>
    function mostra(frase){
        document.write(frase);
    }
    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');        
        pincel.font='25px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);//desenha uma string de texto nas coordenadas especificadas, preenchendo os caracteres da string com o atual    
    }
    function desenhaEsquadro(xa, ya, xc, yc, cor, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var x = 0;
        var y = 0;
        desenhaTexto(x, y - 10, texto);

        pincel.fillStyle = cor;//especifica a cor ou o estilo para usar regiões internas.        
        pincel.beginPath(); //inicia um novo caminho (path), esvaziando a lista de sub-caminhos (sub-paths). Use esse método quando você quiser criar um novo path.  
        pincel.moveTo(xa, ya,texto);//move o desenho para o ponte de inicio marcado.
        pincel.lineTo(xa, yc, texto);//conecta o último ponto do sub-caminho (sub-path) para as coordenadas x, y, através de uma linha (mas na realidade não a desenha).
        pincel.lineTo(xc, yc, texto);        
        pincel.fill();//preenche um dado path ou o path atual com o estilo atual de preenchimento usando uma regra de controle diferente de zero, ou uma regra par-ímpar.
    }    
    desenhaTexto(50, 20, 'Meu esquadros.');//mostra o texto na parte superior do desenho.
    desenhaEsquadro(50, 50, 400, 400, 'green' );//desenha e pinta os denhenhos.
    desenhaEsquadro(100, 175, 275, 350, 'orange');
    desenhaEsquadro(410, 400, 65, 50, 'blue');
    desenhaEsquadro(350, 275, 175, 100, 'yellow');
</script>