minha versão

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

<script>

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

// retângulo verde
pincel.fillStyle = "Darkgreen";
    pincel.fillRect(0 , 0, 600, 400);

// 1 triangulo amarelo
pincel.fillStyle = "yellow"
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(100, 200);
    pincel.lineTo(500, 200);
    pincel.fill();

// 2 triângulo amarelo
pincel.fillStyle = "yellow"
pincel.beginPath();
pincel.moveTo(300, 350);
pincel.lineTo(100, 200);
pincel.lineTo(500, 200);
pincel.fill();




// circulo azul
pincel.fillStyle ="Darkblue"
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2*3.14);
    pincel.fill();



</script>

reparei que lendo no forum tambem da pra colocar uma faixa branca, posicionando um retangulo dentro do circulo, tive que fazer essa atividade no papel primeiro pra conseguir as coordenadas dos pontos.