MINHA BANDEIRA + ARCO BRANCO NO MEIO.... O QUE VALE É TENTAR PARA APRENDER!

adaptei da forma que dei, usei alguns comandos que aprendi além da aula e posso dizer que ficou bonzinho!!!

<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();

    pincel.fillStyle = "white" //arco branco é um pedaço de um círculo
    pincel.beginPath();
    pincel.arc(400, 455, 250, -0.99, 1.38*3,14);
    pincel.fill();
// o -0.99 reduz ou aumenta o arco no sentido anti-horário, o 1.38*3,14, modela o arco no sentido horário...
//esse de baixo é um outro arco na cor azul que coloque dentro para fazer o formado adaptado...
    pincel.fillStyle = "darkblue"
    pincel.beginPath();
    pincel.arc(400, 468, 250, -0.99, 1.38*3,14);
    pincel.fill();

</script>