Ordem e Progresso

Fiz esse código para praticar. A bandeira do Brasil com o cruzeiro do sul.

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

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

    //retangulo
    pincel.fillStyle = "green";
    pincel.fillRect(0,0,600,400);

    //losango
    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(20,200);
    pincel.lineTo(300,380);
    pincel.lineTo(580,200);
    pincel.lineTo(300,20);
    pincel.fill();

    //circulo
    pincel.fillStyle = "darkblue";
    pincel.beginPath();
    pincel.arc(300,200,120,0,2*3.14);
    pincel.fill();

    //faixa
    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.moveTo(180,190);
    pincel.lineTo(180,210);
    pincel.lineTo(420,220);
    pincel.lineTo(420,200);
    pincel.fill();

    //estrelas
    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.arc(350,180,7,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(230,240,4,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(300,240,4,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(285,250,4,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(290,260,2,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(315,250,4,0,2*3.14);
    pincel.fill();
    pincel.beginPath();
    pincel.arc(300,280,4,0,2*3.14);
    pincel.fill();

</script>