Esquadro | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<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(xc, yc); pincel.lineTo(400, 400); pincel.fill(); pincel.fillStyle=cor; pincel.beginPath(); pincel.moveTo(xa, ya); pincel.lineTo(xc, yc); pincel.lineTo(275, 350); pincel.fill(); } desenhaEsquadro(50, 50, 50, 400, 'black'); desenhaEsquadro(100, 175, 100, 350, 'white'); </script>

Fala, Jonathan! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Dessa forma, quando invocamos da primeira vez a função ele coloca os valores em toda a estrutura, mas depois, quando invocamos novamente ele faz o mesmo processo sobrescrevendo a primeira.

Para resolvermos, já que temos uma repetição de blocos de código, vamos deletar um e criar mais dois parâmetros para substituirmos os valores do segundo lineTo

    function desenhaEsquadro(xa, ya, xc, yc, cor, lineToX, lineToY) {

    pincel.fillStyle=cor;
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xc, yc);
    pincel.lineTo(lineToX, lineToY);
    pincel.fill();
    }

Pronto! Agora acrescentamos na invocação da função

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

Espero ter ajudado, Jonathan!

Um abraço e bons estudos