Muito bom o ter pensado no código pra faixa branca, não saberia fazer Para a figura amarela podemos adicionar 4 coordenadas e isso simplificaria nosso código ao invés de criar dois triângulos

Exercício criação bandeira do Brasil

Boa noite, Luan!

Interessante, acabei não reparando nisso quando fiz, mas você tem razão, o código ficou mais clean adicionando apenas mais duas coordenadas.

<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, 375);
  pincel.lineTo(540, 200);
  pincel.lineTo(300, 50);

  pincel.fill();

  pincel.fillStyle = "darkblue";
  pincel.beginPath();
  pincel.arc(300, 210, 110, 0, 2 * 3.14);
  pincel.fill();

  pincel.fillStyle = "white";
  pincel.fillRect(190, 190, 219, 35);
  pincel.stroke();
</script>