Frações usando For

<canvas width= '700' height='500'> </canvas>

<script>

    function desenhaQuadrado (x,y, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect (x ,y, 50, 50);
        pincel.fillStroke = 'black'; //Cor da borda. Se n definir padrao é preto
        pincel.strokeRect (x ,y, 50, 50); //Ponhe contorno. 

    }

    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?', 0, 25);

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

        desenhaQuadrado(x,50,'green');

    }

    desenhaQuadrado (150,50,'white');



 </script>