Exercicio Frações | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600" height="400"></canvas> <script> var tela = document.querySelector("canvas"); var pincel = tela.getContext("2d"); function desenhaQuadrado(x, y, tamanho, cor) { // aqui precisamos usar fillRect, strokeRect, etc pincel.fillStyle = cor; pincel.fillRect(x, y, 50, 50); pincel.fillStroke = "black" pincel.strokeRect (x, y, 50, 50); pincel.fill(); } for (x = 0; x < 150; x = x + 50){ desenhaQuadrado(x, 0, 150, "green"); desenhaQuadrado(150, 0, 50,"white"); } # </script>

Seu código está certinho Jonathan! Eu apanhei muito para entender função e voltei aulas atrás mas consegui! Segue:

<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 escreveTexto(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);    
    }

    /*var y = 5
    var tamanho = 50
    desenhaQuadrado (0 ,y , tamanho, 'green');
    desenhaQuadrado (50 ,y , tamanho, 'green');
    desenhaQuadrado (100 ,y , tamanho, 'green');
    desenhaQuadrado (150 ,y , tamanho, 'white');
    */

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

        desenhaQuadrado (x , 0 , 50 , 'green');

    }

    desenhaQuadrado (150 , 0 , 50, 'white');
    escreveTexto('Qual é a fração ?', 210, 30)

</script>