Eu não tinha entendido muito bem o que era pra fazer nesse exercício, então eu fiz uma função usando o loop com while e for para criar uma determinada fração. O x são as quantidades de quadrados verdes desejados, o y a quantidade de quadrados em branco desejados, o tamanho é o tamanho do quadrado, e por fim a cor dos quadrados:

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

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {
        // aqui precisamos usar fillRect, strokeRect, etc 
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "gray";
        pincel.fillRect(0,0,600,600);


        //Texto escrito fazendo a pergunta
        pincel.fillStyle = "black";
        pincel.font='20px Georgia';
        pincel.fillText("Qual a fração?", 10, 30); 



        //Loop para a quantidade de quadrados desejados
        var pulax = 0;
        for (var inicio = 0; inicio <= x-1; inicio++ ) {

            pincel.fillStyle = cor;
            pincel.fillRect(tamanho*inicio, 40, tamanho, tamanho);
            pincel.strokeStyle = "black"
            pincel.strokeRect(tamanho*inicio, 40, tamanho, tamanho);
            pulax = pulax + 40;

        }


        // Loop para a quantidade de quadrados em brancos
        var tamanhoy = tamanho;
        tamanho = tamanho*x + tamanhoy;
        var inicio = 1;
        while (y > 0 ) {
            pincel.fillStyle = "white";
            pincel.fillRect(tamanho - tamanhoy-tamanhoy*inicio, 40, tamanhoy, tamanhoy);
            pincel.strokeStyle = "black"
            pincel.strokeRect(tamanho - tamanhoy-tamanhoy*inicio, 40, tamanhoy, tamanhoy);
            y--;
            inicio++;
        }



    }   

    desenhaQuadrado(8,5,60,"green");


</script>