fracoes

<meta charset="utf-8">


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

<script type="text/javascript">


    function desenhaQuadrado(x, y, tamanho, cor) {

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.fillStroke="black"; // escolhe a cor da borda 
        pincel.strokeRect(x, y, 50 ,50); //coloca a borda no quadrado

    }

    desenhaQuadrado(0,0,50, 'green');
    desenhaQuadrado(50,0,50, 'green');
    desenhaQuadrado(100,0,50, 'green');
    desenhaQuadrado(150,0,50, 'white');



</script>

esta um pouco diferente da solução do professsor, do que estava pedindo o exercicio eu entendir isso.