Por que o uso de multiplicação e divisão? O que são os valores 6, 7, 5, 14?

Olá Fábio!

Você têm o código completo para que eu possa te responder com mais clareza?

Você declarou XA,XC,YA e YC?

Ok. Bruna. Este é o código:

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

    pincel.fillStyle = 'white'
    pincel.beginPath();
    pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
    pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
    pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
    pincel.fill();

}

desenhaEsquadro(50, 50, 400, 400, 'black');

Olá Fábio!

Bom, pelo que vi é questão de substituição dos valores das variáveis, o calculo será feito com base nestes valores.

Exemplo:

function 
desenhaEsquadro    (xa, ya,  xc,  yc,  cor) {...
_________________________________________________
desenhaEsquadro    (50, 50, 400, 400, 'black');

Quando você chamar a função ela vai substituir as variáveis xa, ya, xc, yc, cor.

Seu código ficaria assim:

function desenhaEsquadro() {
    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle = "white"
    pincel.beginPath();
    pincel.moveTo((6*50 + 400)/7, (9*50 + 5*400)/14);
    pincel.lineTo((6*50 + 400)/7, (50 + 6*400)/7);
    pincel.lineTo((5*50 + 9*400)/14, (50 + 6*400)/7);
    pincel.fill();
}
desenhaEsquadro();

Espero ter te ajudado!

Abraços!

Meu código ficou assim:

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


<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);


function desenhaEsquadro() {
    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle = "white"
    pincel.beginPath();
    pincel.moveTo((6*50 + 400)/7, (9*50 + 5*400)/14);
    pincel.lineTo((6*50 + 400)/7, (50 + 6*400)/7);
    pincel.lineTo((5*50 + 9*400)/14, (50 + 6*400)/7);
    pincel.fill();
}
desenhaEsquadro();



</script>

Eu substitui as variáveis com os valores...

Sim. A troca de variáveis eu entendi, só não entendi, por exemplo, 6*50.../7. Eu pulei essa parte do quadro branco e chamei a função desenhaEsquadro:

desenhaEsquadro (100, 175, 275, 350, 'white'); ficou muita mais fácil de entender e menor.

Abraços

Então Fábio, operações matemáticas como essa no meio do código me deixam doida haha é perigoso, pois o risco de se atrapalhar é grande! Mas basicamente ele substitui as variáveis e processa o calculo, chegando no valor.

Digo que não é impossível, mas é bem difícil você pegar um código como este, geralmente os programadores tentam facilitar a leitura do código,, o que ajuda na manutenção e compreensão, isso é uma boa prática. O professor ou exercício fez apenas que você parasse e olhasse o código afim de criar esta dúvida propositalmente e deu certo haha pois agora você pode ter tido um melhor entendimento do código...

Espero ter ajudado de alguma forma, se possível classifique como resolvido, caso a sua dúvida tenha sido sanada.

Abraço!

Fábio, fiz os cálculos pra tu ver por debaixo dos panos é assim que fica:

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


<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);

function desenhaEsquadro() {
    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle = "white"
    pincel.beginPath();
    pincel.moveTo(100, 175);  /*((6*50 + 400)/7, (9*50 + 5*400)/14);*/
    pincel.lineTo(100, 350);  /*((6*50 + 400)/7, (50 + 6*400)/7);*/
    pincel.lineTo(275, 350);  /*((5*50 + 9*400)/14, (50 + 6*400)/7);*/
    pincel.fill();
}
desenhaEsquadro();



</script>

(: