<canvas widht="200" height="50"></canvas>
<p>Qual é a fração?</p>

<style type="text/css">

    p {

        font-family: cursive;
        font-size:  16px;
        text-align: left;

    }

</style>

<script>

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

    function desenhaQuadrado(x, y, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, 50, 50);

    }

    function escreveTexto(texto, x, y) {

        pincel.font='16px cursive';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y)

    }

    escreveTexto("Qual é a fração?", 50, 30)

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

        desenhaQuadrado(x, 0, 'green')
        if(x == 100) {

            desenhaQuadrado(150, 0, 'white');
            break;

        }

    }

</script>