Losango sem desenhar dois triângulos | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Fiz um losango sem desenhar dois triângulos:

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

<script>
    var tela, pincel;

    tela = document.getElementById("a");
    pincel = tela.getContext("2d");

    //quadrado
    pincel.fillStyle = 'rgb(40,155,36)';
    pincel.fillRect(0,0,600,400);

    //losango
    pincel.fillStyle = 'rgb(254,224,0)';
    pincel.beginPath();
    pincel.moveTo(300,50);
    pincel.lineTo(50,200);
    pincel.lineTo(300,355);
    pincel.lineTo(550,200);
    pincel.fill();

    //círculo
    pincel.beginPath();
    pincel.fillStyle = 'rgb(0,37,123)';
    pincel.arc(300,200,100,0,2*3.14);
    pincel.fill();

</script>