Bandeira com faixa e losango

Eu acabei fazendo esse desafio, antes mesmo de ver que ele existia kkk. Então acabei resolvendo diferente, não usei dois triângulos, não sei se é assim que se faz o losango realmente, deve ter uma forma mais enxuta de fazer, mas acho bacana compartilhar que consegui fazer mesmo assim. Fiz uma faixa também, por enquanto está reta, mas está ai um detalhe a mais ;).

<meta chansert="UTF-8">

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

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.moveTo(300, 200);
    pincel.arc(300, 200, 100, 0, 2 * 3.14);
    pincel.fill();

    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(200 , 190);
    pincel.lineTo(400, 190);
    pincel.lineTo(400, 210);
    pincel.lineTo(200, 210);
    pincel.fill();

</script>