Olá! Na tentativa de interagir com a hipotética professora do exercício 6 sobre franções, criei um código em que ela pudesse escolher o denominador e o numerador, gerando assim o desenho de acordo com a fração desejada. Como deixar este código mais "elegante"? Obrigada.

<meta charset="UTF-8">

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

<script>

    var denominador = parseInt(prompt("Qual será o denominador?"));
    var numerador = parseInt(prompt("Qual será o numerador?"))

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

    function desenhaQuadrado(x, y, tamanho, cor){ 

        pincel.fillStyle = cor
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = "black"
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

        for (var x = 0; x < (denominador * 50); x = x+50) {

            desenhaQuadrado(x,0,50,"white");

        }

        for (var x = 0; x< (numerador * 50); x = x+50) {
            desenhaQuadrado(x,0,50,"green");
        }

</script>