gerador de frações

pra ir um pouco além do proposto, criei uma função que desenha as frações recebendo como parâmetros (numerador, denominador, xDoQuadrado, yDoQuadrado), sendo as 2 últimas as coordenadas da posição inicial onde se quer desenhar. Assim a professora pode criar uma página com várias frações para apresentar de uma vez

<meta charset="UTF-8">

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

<script>

    function desenhaTexto(texto, x , y) {

        var tela = document.querySelector('canvas');

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

        pincel.font='20px Georgia';

        pincel.fillStyle='black';

        pincel.fillText(texto, x, y);    
    }

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

        var tela = document.querySelector('canvas');

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

        pincel.fillStyle = cor;

        pincel.fillRect(x, y, tamanho, tamanho);

        pincel.strokeStyle = 'black';

        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    function desenhaContorno(x, y, tamanho){

        var tela = document.querySelector('canvas');

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

        pincel.strokeStyle = 'black';

        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    function desenhaFracao(numerador, denominador, xDoQuadrado, yDoQuadrado) {

        for (var contorno = 1; contorno <= denominador; contorno++){

            desenhaContorno(xDoQuadrado, yDoQuadrado, 80);
            xDoQuadrado += 80;
        }

        xDoQuadrado -= 80 * denominador;

        for (var quadrado = 1; quadrado <= numerador; quadrado++){

            desenhaQuadrado(xDoQuadrado, yDoQuadrado, 80, 'lightblue');
            xDoQuadrado += 80;

        }
    }

    desenhaTexto('Qual a fração?', 80, 30)

    desenhaFracao(3, 4, 80, 50);

    desenhaFracao(5, 9, 80, 150);

    desenhaFracao(2, 5, 80, 250);

    desenhaFracao(4, 7, 80, 350);

</script>