Frações usando o For

<meta charset="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 desenhaFracao(x,y, tamanho){
        desenhaQuadrado(x,y,tamanho,'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?', 0, 20);
    var tamanho = 50;
    for(var x = 0; x <= 150; x = x + tamanho){
        if(x < 150){
            desenhaFracao(x, 50, tamanho);
        }
        else{
            desenhaQuadrado(x,50, tamanho, 'white');
        }

    }





</script>