<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>
