Minha solucao usando o "for"

<meta charset="utf-8">



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

<script>

    function desenhaQuadrado(x, y, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, 50);
    }
    function desenhaTexto(texto, x, y) {
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.font = "20px Verdana";
        pincel.fillStyle = "black"
        pincel.fillText(texto, x, y);
    }
    desenhaTexto("Qual é a fração?", 0, 30);

    var y = 50;

    for(var x = 0; x < 150; x = x + 50){
        desenhaQuadrado(x, y, "darkorange");
    }

    desenhaQuadrado(150, y, "white");
 </script>