Uma explicação rápida: Para escrever menos, e também pra eu treinar mais, utilizei o loop, assim não fica repetitivo, aproveitei e fiz uma função a mais para o 'Rect', para fazer o último quadrado vazio, assim mesmo se no futuro a "professora" peça que o fundo seja de outra cor, esse último quadrado sempre será vazio.

<meta charset="UTF-80">

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


<script>

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

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

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


    function desenhaRect(x, y, 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='green';
        pincel.fillText(texto, x, y);    
    }


    for (var x = 100; x <= 300; x = x + 100) {

        desenhaQuadrado(x, 100, 100, 'green');
    }

    desenhaTexto("Qual é a fração?", 100, 90);
    desenhaRect(400, 100, 100);

</script>