Bandeira do Brasil com as estrelas e a faixa branca onde iria ordem e progresso

Fui um pouco além e fiz a faixa usando o moveTo e o lineTo e fiz alguns pontos simbolizando as estrelas da bandeira.

Quem tiver curiosidade, eu irei deixar o código aqui.

O resultado foi esse:

Espeto ter ajudado. Sucesso na sua jornada!!

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

<script>

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

        //usando o Rect para fazer o retângulo da bandeira

        pincel.fillStyle = "green"; // defino a cor em verde escuro

        pincel.fillRect(0,0,600,400); // Defino o eixo x início, eixo y início, tamanho do eixo x, tamanho do eixo y

        //usando o moveTo e lineTo para fazer o retângulo

        pincel.fillStyle = "yellow"; // defino a cor em amarelo

        pincel.beginPath(); // informo que irei iniciar a fazer a linha
        pincel.moveTo(300, 40); // marco ponto de inicial na parte superior do losango
        pincel.lineTo(40, 200); // ponto esquerdo do losango
        pincel.lineTo(300, 360); // ponto de baixo do losango
        pincel.lineTo(560, 200); // ponto de direito do losango
        pincel.fill(); // depois de feita as linhas eu peço o preenchimento

        //usando o arc para fazer o circulo

        pincel.fillStyle = "darkblue"; // defino a cor em azul

        pincel.beginPath(); // informo que irei iniciar
        pincel.arc (300, 200, 110, 0, 2*3.14);
        pincel.fill(); // depois de feita as linhas eu peço o preenchimento

        //usando o moveTo e lineTo para fazer retângulo onde iria a escrita "ordem e progresso"

        pincel.fillStyle = "white"; // defino a cor em azul

        pincel.beginPath(); // informo que irei iniciar a fazer a linha
        pincel.moveTo(190, 180); // marco ponto de inicial do retângulo que seria a faixa branca
        pincel.lineTo(190, 210); // ponto esquerdo inferior
        pincel.lineTo(408, 230); // ponto direito inferior
        pincel.lineTo(411, 200); // ponto direito superior 
        pincel.fill(); // depois de feita as linhas eu peço o preenchimento

        // faço os pontos símbolizando algumas estrelhas que tem na bandeira 

        pincel.beginPath();
        pincel.arc(340, 160, 4, 0, 2*3.14); // a única na parte superior da bandeira 
        pincel.fill();

        pincel.beginPath();
        pincel.arc(220, 230, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(240, 260, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(230, 270, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(250, 290, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(240, 270, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(270, 260, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(270, 270, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(300, 230, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(310, 240, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(320, 270, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(290, 260, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(360, 250, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(380, 260, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(320, 290, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(310, 280, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(350, 270, 2, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(350, 290, 1, 0, 2*3.14);
        pincel.fill();

        pincel.beginPath();
        pincel.arc(370, 270, 2, 0, 2*3.14);
        pincel.fill();

</script>