Frações e canvas

Posto aqui a minha solucao para o problema.

Aqui usei for e coloquei um break para printar o quadrato White e parar ali o programa. Da pra fazer sem o break, mas acabei fazendo desse jeito pq funcionou.

<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.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 fracao? ", 0 , 50);

    for(var x = 0; x < 400; x = x + 100) {
        y= 100;
        if (x == 300) {
            desenhaQuadrado(x, y, 100,'white');
            break;
        }
        desenhaQuadrado(x, y, 100,'green');
   }

</script>