Solução utilizando laço de repetição

Segue abaixo uma das muitas soluções possíveis para resolver esse exercício. Neste caso utilizei funções e também o comando "for"

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

    function desenhaTexto(texto, x, y){
        var tela = document.querySelector("canvas").getContext("2d");
        var pincel = tela
        pincel.font = "20px Georgia"
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
    }

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

                        //eixo-x, eixo-y, width, cor.
    function desenhoQuadrado(x, y, tamanho, cor){
        var tela = document.querySelector("canvas").getContext("2d");
        var pincel = tela
        pincel.fillStyle = "green";
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = cor;
        pincel.strokeRect(x, y, tamanho, tamanho);        
    }
    function repeat(){
        var tela = document.querySelector("canvas").getContext("2d");
        var pincel = tela
        var increase = 0
        for(var i = 0; i < 3; i++){
            desenhoQuadrado(50 + increase, 50, 100, "black")
            increase = increase + 100
            console.log(i)
            if (i == 2){
                pincel.strokeRect(50 + increase, 50, 100, 100)
                }

        }
    } 
    repeat();

</script>