Fiz desta forma , com FOR e WHILE_praticando

<canvas width="700" height="500"></canvas>



<script>

//fillStyle = Definição de cor de preenchimento.
//fillRect = Desenhamos um retangulo na tela , de acordo com planos cartesianos onde temos um eixo x, na horizontal, e um eixo y, na vertical.
//strokeStyle = Definição da cor da borda 
//strokeRect(). A borda deve ser inserida na mesma posição do quadrado:
//fillText, que recebe o texto e as coordenadas onde deve aparecer

function desenhaQuadrado(x, y, tamanho, cor) {
    // aqui precisamos usar fillRect, strokeRect, etc 


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

     pincel.fillStyle = cor;
    pincel.fillRect (x,y,tamanho,tamanho);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x,y,tamanho,tamanho);

}


function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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



desenhaTexto("Qual é a fração?", 50, 30);

for (var x = 0 ; x < 150 ; x = x + 50){

    var y = 50;

    while (y < 100 ){

    desenhaQuadrado (x,y,50,'green');
        y = y + 50

    }

}
desenhaQuadrado(150, 50, 50, 'white');


</script>