[Projeto] Bandeira com o Arco branco no meio...

Decidir ir além e colocar o arco no meio... não foi fácil... tive que sobrepor 2 semi-círculos para dar certo... mas valeu a pena!

<canvas width="800" height= "500"> </canvas>

<script>

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

    pincel.fillStyle = "green"
    pincel.fillRect(0, 0, 800, 500);


    pincel.fillStyle = "yellow"
    pincel.beginPath();
    pincel.moveTo(400, 50);
    pincel.lineTo(80, 250);
    pincel.lineTo(400, 450);
    pincel.lineTo(720, 250);
    pincel.fill();

    pincel.fillStyle = "darkblue"
    pincel.beginPath();
    pincel.arc(400, 250, 135, 2*3,14);
    pincel.fill();

//círculo branco criado (eixo x, y, tamanho, Reduz arco sentido horário, cria o arco *pi)
    pincel.fillStyle = "white"
    pincel.beginPath();
    pincel.arc(400, 455, 250, 4.139, 1.683*3.14);
    pincel.fill();
//círculo criado para sobrepor e fazer o arco bonitinho...
    pincel.fillStyle = "darkblue"
    pincel.beginPath();
    pincel.arc(400, 468, 250, 4.139, 1.683*3.14);
    pincel.fill();


</script>