Bandeira Brasil - Desenho losango

Eu acabei tentando resolver sem olhar as instruções e fiz o losango sem usar dois triângulos. Meu código ficou assim:

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

<script>
    var tela = document.querySelector ("canvas")
    var pincel = tela.getContext ("2d")

//verde
    pincel.fillStyle = "green"
    pincel.fillRect (0,0,600,400)

//amarelo
    pincel.fillStyle = "yellow"
    pincel.beginPath ();
    pincel.moveTo (50,200);
    pincel.lineTo(300,350);
    pincel.lineTo (550,200);
    pincel.lineTo (300,50);
    pincel.fill ();

//azul
    pincel.fillStyle = "darkblue"
    pincel.beginPath ();
    pincel.arc (300,200,100,0, 2*3.14);
    pincel.fill ();
    </script>

tudo bem? Ou isso pode dar problema em aplicações futuras?