Um solução diferente

Usei a lógica do moveTo e lineTo, e resolvi fazer o losango sozinho, deu muito certo, adicionei alguns comentários sobre cada ponta, para me guiar melhor na localização dos pontos no desenho

<meta charset="utf-8">

<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();
    //topo
    pincel.moveTo(290,40);
    // ponta esquerda
    pincel.lineTo(40,200);
    // ponta inferior
    pincel.lineTo(300,360);
    // ponta direita
    pincel.lineTo(560,200);
    pincel.fill();

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300,200,90,0,2 * 3.14);
    pincel.fill();


</script>