Aprimorando programa Fraçoes

Oi pessoal, tudo bem? Resolvi brincar um pouco com o exercício de frações, e para familiarizar os alunos com o conceito de numerador e denominador para montar frações, criei a função pedindo: (x, y, numerador, denominador, cor) e em seguida representando o resultado dem forma de fração em desenho. Isso resultou no código abaixo. Podem avaliar/sugerir algo?

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

<script>

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


    function desenhaTexto(texto, x, y) {

        pincel.font = '20px Calibri';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);

    }

    function desenhaQuadrado(x, y, numerador, denominador, cor) {

        var ladoBloco = 100;

    //PREECHIMENTO

        for(var contador = 0; contador < numerador * 100; contador = contador + ladoBloco) {

            pincel.fillStyle = cor;
            pincel.fillRect(x + contador, y, ladoBloco, ladoBloco);

        }

    //BORDAS

        for(var contador = 0; contador < denominador * 100; contador = contador + ladoBloco) {

            pincel.strokeStyle = 'black';
            pincel.strokeRect(x + contador, y, ladoBloco, ladoBloco);

        }

    }

    desenhaTexto('Qual é a fração?', 250, 50);
    desenhaQuadrado(125, 125, 1, 4, 'green');

</script>