Dificuldade em desenvolver função para desenho

Queria uma orientação de como compreender mais facilmente a forma de escrever o código em uma função para realizar um desenho.

Quando vou fazer o exercício tomo como base outros exercícios anteriores e tento assim desenvolver o código que executará a função para realizar um desenho. Mas quando tento escrever não tenho conseguido fazer com que o desenho apareça na tela e quando vou conferir com o resultado, acontece de estar muito diferente do que eu fiz. Sei que pode haver formas diferentes de escrever determinada função, mas os comandos devem ser similares.

O código postado na sequência, é o último exercício da aula dois de lógica de programação II. O exercício anterior também tive dificuldade. O

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

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

    function desenhaEsquadro(xa, ya, xc, yc, cor) {
      pincel.fillStyle = cor;
    pincel.beginPath ();
    pincel.moveTo (xa,ya);
    pincel.lineTo (xa,yc);
    pincel.lineTo (ya,yc);
    pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, 'black');
    desenhaEsquadro(100, 175, 275, 350, 'white');

</script>

s demais consegui fazer normalmente.