Usei o for para preencher os quadrados.

Olá! Usei o for para preencher os quadrados. Achei também que ficou mais fácil alterar o preenchimento caso necessário. O que acham? Gostaria de opinião. Obrigada.

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>



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

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


        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, tamanho, tamanho);



    }

    for (var x = 30; x < 200; x = x + 50) {

        desenhaQuadrado (x, 50, 50, "white");

    }

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

        desenhaQuadrado(x, 50, 50, "green");

    }


    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?", 30, 30);