Forma alternativa

Baseado no código da atividade, fiz um programa alternativo que pede ao usuário um numerador e denominador e depois representando em quadrados, o código ficou assim:

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

<script>

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

    function desenhaTexto(texto, x, y)
    {
        pincel.font = "20px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
    }

    function desenhaQuadrado(x, cor)
    {
        pincel.fillStyle = cor;
        pincel.fillRect(x, 50, 100, 100);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, 50, 100, 100);
    }

    function criarFracao(numerador, denominador)
    {
        var inicioCoordenadaX = 10;

        for(var i = 0; i < denominador; i++)
        {
            desenhaQuadrado(inicioCoordenadaX, "white");
            inicioCoordenadaX += 100;
        }

        inicioCoordenadaX = 10;

        for(i = 0; i < numerador; i++)
        {
            desenhaQuadrado(inicioCoordenadaX, "green");
            inicioCoordenadaX += 100;
        }

    }

    var numerador = prompt("Digite o numerador da fração:");
    var denominador = prompt("Digite o denominador da fração:");

    criarFracao(numerador, denominador);

</script>

Sugestões de melhorias ao código serão muito bem vindas