Solução: Ordem e Progresso

Olá pessoal, segue minha resolução abaixo.

Tentei o melhor que pude deixar a geometria perfeita ,rs. Aceito sugestões para melhoramento do código.

Alguém teria alguma dica para dar, para ser mais fácil de achar os pontos certos das coordenadas ?

Agradeço desde já. :)

<meta charset="utf-8">

<canvas width = '600' height = '600'></canvas>

<script>

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 500, 290);


    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(250, 25);
    pincel.lineTo(30, 140);
    pincel.lineTo(470,130);
    pincel.fill();

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(250, 255);
    pincel.lineTo(30, 140);
    pincel.lineTo(470,130);
    pincel.fill();



    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(250, 140, 85, 0, 2*3.14); //Os primeiros dois parâmetros do método arc são as coordenadas X e Y do centro do cirsulo do nosso caso 300 e 200. Terceiro parâmreto valor do raio, que nosso caso é o 100 e o minimo 
    pincel.fill();


</script>