minha bandeira com 1 estrela;

Ao invés de fazer dois triângulos, preferi continuar as coordenadas para formar logo o losango.

E, para treinar, peguei uma coordenada de estrela da internet, achei uma lógica entre o centro do plano cartesiano da estrela e o centro do meu círculo e fiz as coordenadas da estrela.

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

<script>

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

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0, 0, 600, 400); // (origem x, origem y, preenchimento x, preenchimento y)

    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 = 'blue';
    pincel.beginPath();
    pincel.arc(300, 200, 100, 0, 2 * 3.14); // (centro do círculo x, centro y, tamanho do raio, ângulo inicial, ângulo final em radianos)
    pincel.fill();

    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.moveTo(300, 150);
    pincel.lineTo(290, 180);
    pincel.lineTo(260, 180);
    pincel.lineTo(280, 200);
    pincel.lineTo(270, 230);
    pincel.lineTo(300, 210);
    pincel.lineTo(330, 230);
    pincel.lineTo(320, 200);
    pincel.lineTo(340, 180);
    pincel.lineTo(310, 180);
    pincel.fill();


</script>