Frações

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

<script>




    function desenhaQuadrado(x, y, cor){



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

        pincel.fillStyle = cor;// cor do quadrado
        pincel.fillRect (x, y, 50, 50); // quadrado
        pincel.fillStroke = ' black'; // cor da borda
        pincel.strokeRect(x, y, 50, 50); // medida da borda

    }


    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, 30);

    for(var x = 0; x < 150; x = x + 50){
           desenhaQuadrado(x, 100, 'green');
    }

    // quadrado branco
    desenhaQuadrado(150, 100, 'white'); 


</script>