Esquadro vazado!

Olá pessoal,

Não tinha entendido direito como o Path agia. Ai fui testar um pouco a funcionalidade do .beginPath, .moveTo e .lineTo fazendo um esquadro vazado, em algum momento, sem querer eu desliguei a linha //.beginPath();, mas o código rodou da mesma forma. Como funciona esse cara, .beginPath(); ?

Outra questão é que tentei torna o gráfico meio ajustável , mas tive que usar algumas operações de proporção para conseguir isso. gostaria de saber se desta forma é legal de fazer ?

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>
function desenhaRetangulo(x, y, largura, altura, cor) {
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle=cor;
    pincel.fillRect(x,y, largura, altura);
    pincel.strokeStyle ='black';

}

desenhaRetangulo(0, 0, 600, 400, 'gray');
desenhaRetangulo(50, 125, 500, 150, '#949494');

function desenhaEsquadro(x, y, d, cor) {

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

    pincel.fillStyle = cor;
    //pincel.beginPath();
    pincel.moveTo(x + 0, y + 0);
    pincel.lineTo(x + 0, y + (d/100)*100); 
    pincel.lineTo(x + (d/100)*100, y + (d/100)*100);
    pincel.lineTo(x + (d/100)*64.285, y + (d/100)*85.714); 
    pincel.lineTo(x + (d/100)*14.285, y + (d/100)*85.714); 
    pincel.lineTo(x + (d/100)*14.285, y + (d/100)*35.714); 
    pincel.lineTo(x + (d/100)*64.285, y + (d/100)*85.714); 
    pincel.lineTo(x + (d/100)*100, y + (d/100)*100);
    pincel.fill();

}

desenhaEsquadro(100, 25, 350, "black"); // pode mudar posição e dimensão do esquadro.

</script>