Realizei o código de maneira diferente, resultado interessante!

Tentei realizar o código de maneira diferente pra tornar ele dinâmico, podendo fazer a alteração das quantidades de quadrados coloridos e de quadrados não coloridos, podendo alterar as frações! Consegui chegar num resultado satisfatório, mas acho que ainda posso melhorar um pouco mais pra tornar ele mais fácil de ser visualizado por outras pessoas que eventualmente gostariam de utilizar a ferramenta.

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

<script>

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

    /* Utilize o parâmetro "z" para definir a quantia de quadrados vazios
    em razão dos que serão coloridos!
    */

    function desenhaQuadrado(x, z, y, tamanho, corUm, corDois){
        pincel.fillStyle = corUm;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = corDois;
        pincel.strokeRect(x, y, tamanho + z, tamanho);
    };

    var x = 0;

    function montaFracao(){
        while(x < 150){
            desenhaQuadrado(x, 50, 50, 50, 'green', 'black');
            x = x + 50;
        }
    }

    pincel.font='20px Georgia';
    pincel.fillStyle='black';
    pincel.fillText("Qual é a fração?", 0, 30);

    montaFracao();

</script>