Olá,

Eu formulei um código utilizando alguns conceitos aprendidos no curso anterior, então desenvolvi uma forma de interagir com o usuário para criação do esquadro, também deixando o mesmo centralizado dentro da tela, gostaria que me ajudassem a avaliar o projeto, desde já agradeço.

Segue abaixo o código:

<canvas width="600" height="400" id="tela" style="border: 2px solid brown"></canvas>
<script>

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

function desenhaEsquadro(largura, altura, cor) {


    var width = tela.offsetWidth;
    var height = tela.offsetHeight;

    var pontoXinicio = (width-largura)/2;
    var pontoYinicio = (height-altura)/2;
    var pontoXfim = pontoXinicio+largura;
    var pontoYfim = pontoYinicio+altura;

    pincel.fillStyle = cor
    pincel.beginPath();
    pincel.moveTo(pontoXinicio, pontoYinicio);
    pincel.lineTo(pontoXinicio, pontoYfim);
    pincel.lineTo(pontoXfim, pontoYfim);
    pincel.fill();
    pincel.fillStyle = 'white'
    pincel.beginPath();
    pincel.moveTo((6 * pontoXinicio + pontoXfim) / 7, (9 * pontoYinicio + 5 * pontoYfim) / 14);
    pincel.lineTo((6 * pontoXinicio + pontoXfim) / 7, (pontoYinicio + 6 * pontoYfim) / 7);
    pincel.lineTo((5 * pontoXinicio + 9 * pontoXfim) / 14, (pontoYinicio + 6 * pontoYfim) / 7);
    pincel.fill();

}

var largura = parseInt(prompt("Informe a largura do esquadro: "));
var altura = parseInt(prompt("Informe a altura do esquadro: "));
var cor = prompt("Informe a cor do esquadro: \n Ex: black, darkgreen, blue, gray, yellow, etc.");


desenhaEsquadro(largura,altura,cor);

</script>