no caso do esquadro, por exemplo, por ser um triângulo ele tem 3 pontos (digamos A, B e C). no código usamos o moveTo(coordenada_de_A) e depois duas vezes o lineTo(), sendo uma vez para as coordenadas de B e outra para as coordenadas de C. Isso forma duas retas no total (uma de A a B e outra de B a C), a terceira é formada pelo fill(), que acaba preenchendo do ponto atual (C) até o ponto inicial (A). Não foi desenhada uma linha usando o lineTo() ligando o ponto C ao ponto A, embora teoricamente esta linha exista. A questão é: quão dispensável esta linha é? . Abaixo o código do meu esquadro azul-marinho com a linha comentada:
<canvas width='400' height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'navy';
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(400,400);
pincel.lineTo(50, 400);
pincel.lineTo(50, 50); //esta é a linha de que estou falando..
pincel.fill();
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.moveTo(100, 175);
pincel.lineTo(275, 350);
pincel.lineTo(100, 350);
pincel.fill();
</script>