Bandera de Brasil

Hice la bandera de Brasil, pero me falto la curva blanca que va dentro del circulo...

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

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

        pincel.fillStyle = "#00A859"; //Color base
        pincel.fillRect(0,0,600,400);

        pincel.fillStyle = "#f1da09"; //Parte de arriba del rombo
        pincel.beginPath();
        pincel.moveTo(300,30);
        pincel.lineTo(50,200);
        pincel.lineTo(550,200);
        pincel.fill();

        pincel.fillStyle = "#f1da09"; //Parte de abajo del rombo
        pincel.beginPath();
        pincel.moveTo(300,370);
        pincel.lineTo(50,200);
        pincel.lineTo(550,200);
        pincel.fill();

        pincel.fillStyle = "#3E4095"; //Circulo
        pincel.beginPath();
        pincel.arc(300,200,110,0,2*3.14);
        pincel.fill();

    </script>

busque como pero solo encontré una que era así y pues no pude acomodarla, ¿alguien sabe como?

pincel.fillStyle = "white";
        pincel.beginPath();
        pincel.moveTo(350,25);
        pincel.lineTo(300,25);
        pincel.quadraticCurveTo(265,35,250,75);
        pincel.lineTo(250,125);
        pincel.fill();