Quadrados mais frase!

<meta chatset ="UTF-8">
<canvas width="700" height="500"></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.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 = 'black';
    pincel.fillText (texto, x, y);
}

    desenhaTexto("Qual a fração?", 50, 60);

    var x = 100; 
    while(x <= 200){
        desenhaQuadrado(x, 100, 50, 'green' );
        x = x + 50;
    }
    desenhaQuadrado(250, 100, 50, 'white' );
</script>

Fiz a fração utilizando o "while" para evitar repetição do mesmo código.