Fiz a bandeira de outra maneira

Ao invés de desenhar dois triângulos eu fiz o losango de forma mais direta. Não sei se isso afetaria outros tipos de programas, mas dessa maneira eu evito duas linhas de código, já que não precisaria reposicionar o cursor para desenhar o outro triângulo:

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

    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();
    pincel.arc(300,200,100,0,2*Math.PI);

    pincel.fill();


</script>