Minha Resolução > Criando representações de frações

<canvas width="2000" height="200"></canvas>

<script>
    function desenharQuadrado(cor, x, y, tamanhox, tamanhoy) {
        pincel.fillStyle = cor;
        pincel.strokeStyle = 'black'
        pincel.fillRect(x, y, tamanhox, tamanhoy);
        pincel.strokeRect(x, y, tamanhox, tamanhoy);
    }

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

    var quantidade = parseInt(prompt("Informe o número de quadrados preenchidos que a fração deve ter: "));
    // Define quantas vezes o primeiro looping deve ser repetido.
    var x = 0;
    // Inicia width em 0

    for (i = 0; i < quantidade; i++) {
        // Looping para gerar numerador da fração
        if (i == 0) {
            // Se for o primeiro quadrado a ser inserido, devemos levar em conta o ponto x como 0 
            desenharQuadrado('green', x, 0, 90, 90);
        } else {
            // Se o quadrado não for o primeiro, deve ser incrementado 90 no ponto x 
            x = x + 90;
            desenharQuadrado('green', x, 0, 90, 90);
        }
    }

    var quantidade2 = parseInt(prompt("Informe o número de quadrados vazios que a fração deve ter: "));
    var x = quantidade * 90;
    // Permite sabermos o ponto em que os quadrados preenchidos pararam.

    for (i = 0; i < quantidade2; i++) {
        // Looping para gerar quadrados "vazios"
        if (i == 0) {
            // Se for o primeiro quadrado "vazio", iniciamos a partir do último quadrado preenchido.
            desenharQuadrado('white', x, 0, 90, 90);
        } else {
            // Se não for o primeiro quadrado "vazio", incrementamos 90 ao ponto x
            x = x + 90;
            desenharQuadrado('white', x, 0, 90, 90);
        }
    }
</script>