1
resposta

Minha bandeira, com elementos extras para me desafiar um pouco mais.

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

<script>

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

    // retângulo verde
    pincel.fillStyle = "green";
    pincel.fillRect(0,0,600,400);

    // losango
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300,40);
    pincel.lineTo(60,200);
    pincel.lineTo(300,360);
    pincel.lineTo(540,200);
    pincel.fill();

    // círculo central
    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(300,200,100, 0, 2*3.14);
    pincel.fill();

    // faixa branca
    pincel.fillStyle = 'white';
    pincel.fillRect(200,190,200,20);


    // texto central
    pincel.fillStyle = 'black';
    pincel.font = '16px arial';
    pincel.fillText('Ordem e Progresso',230,205);

</script>
1 resposta

Parabéns Wesley.

Ficou muito bom. Tive a mesma ideia que você, mas infelizmente não consegui fazer. Obrigado por compartilhar o código. Forte abraço e bons estudos.