Solução na qual o tamanho será a quantidade de quadrados.

Escrevi o código de maneira que pudesse utilizar um multiplicador para desenhar a quantidade de quadrados verdes (50px X 50px) em apenas uma chamada da função.

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

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");


    function desenhaTexto(texto, x , y) {
        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }


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

        var tamanho = tamanho;
        var contador = x;
        var fim = (tamanho*50)+x;

        while(contador < fim) {
            quadrado(x, y, cor);
            contador += 50;
            x = contador;
        }


    }

    function quadrado(x, y, cor) {
        // aqui precisamos usar fillRect, strokeRect, etc
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, 50);

    }

    desenhaTexto("Qual é a fração?", 20, 30);
    desenhaQuadrado(20, 50, 3, "green");
    desenhaQuadrado(170, 50, 1, "white");

</script>