Fala nerds,

Fiz uma versão do código que pega apenas uma dimensão do usuário (que chamei de tamanho do esquadro) e a cor desejada.

O cálculo de todos os outros pontos é feito em função do xA.

Ainda dá pra implementar umas condições pra testar se o tamanho digitado pelo usuário está dentro do limite, ou se o nome da cor é válido. Nessa implementação o programa poderia insistir pro usuário entrar com valores válidos, ou então cair num valor default.

Pela hora fiquei com preguiça de implementar...rsrs

Abçs, Maurício

<!-- esquadro.html -->

<canvas width="1200" height="800"></canvas>

<script>

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

    function desenhaEsquadro(xA, cor) {
    //a implementacao fica com vc :)

        let yC = xA * 8;

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xA, xA);
        pincel.lineTo(xA, yC);
        pincel.lineTo(yC, yC);
        pincel.fill();

        pincel.fillStyle="white";
        pincel.beginPath();
        pincel.moveTo(xA * 2, xA * 3.5);
        pincel.lineTo(xA * 2, yC - xA);
        pincel.lineTo(xA * 5.5, yC - xA);
        pincel.fill();

    }

    let tamanho = parseFloat(prompt("Escolha um tamanho para o esquadro entre 1 e 100:"));
    let cor = prompt('Escolha uma cor:');

    desenhaEsquadro(tamanho, cor);

</script>