Minha solução - Representando qualquer FRAÇÂO

Olá gente, eu fiz um programa mais interativo para representar qualquer fração. Pensando em utilizar nas minhas aulas para ajudar aos alunos a "enxergarem" a representação de uma fração.

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

<script>

    function desenhaQuadrado(x, y, cor) {

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


        pen.fillStyle = cor
        pen.fillRect(x, y, 50, 50);
        pen.strokeStyle = 'black';
        pen.strokeRect(x, y, 50, 50);

    }

    var num = parseInt(prompt("Digite o numerador da fração "));

    var x = 50;
    var i = 0;

    while (i < num) {

        desenhaQuadrado(x, 50, 'blue');
        x += 50
        i += 1
    }

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

    var j = 0;

    while (j < (den - num)){

        desenhaQuadrado(x, 50, 'white');
        x += 50
        j += 1
    }


</script>