Frações - minha resolução

Utilizei for para evitar a repetição dos quadrados verdes, meu código ficou assim:

<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, 100, 100);
    pincel.strokeStyle = "black";
    pincel.strokeRect(x, y, 100, 100);

    }
    function desenhaTexto (texto, x, y){
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");
        pincel.font = "20px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText("Qual é a fração?", 50, 30);
    }

    desenhaTexto("Qual é a fração?", 0, 30);
    for(var x = 0; x < 300; x = x + 100) {
        desenhaQuadrado(x, 50, "green");
    }
    desenhaQuadrado(300, 50, "white");

</script>