[Dúvida] Por que não imprime três desenhos da flor em coordenadas distintas, já que eu chamei a função três vezes com coordenadas distintas?

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

<script>

    function desenhaFlor (x, y, r) {
    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'red';
    pincel.beginPath ();
    pincel.arc (x, y, r, 0 , 2*3.14);
    pincel.fill ();

    pincel.fillStyle = 'yellow';
    pincel.beginPath ();
    pincel.arc (x, y-2*r, r, 0, 2*3.14);
    pincel.fill ();

    pincel.fillStyle = 'blue';
    pincel.beginPath ();
    pincel.arc (x, y+2*r, r, 0, 2*3.14);
    pincel.fill ();

    pincel.fillStyle = 'orange';
    pincel.beginPath ();
    pincel.arc (x-2*r, y, r, 0, 2*3.14);
    pincel.fill ();

    pincel.fillStyle ='black';
    pincel.beginPath ();
    pincel.arc (x+2*r, y, r, 0, 2*3.14);
    pincel.fill ();
}

desenhaFlor (300,30,10);
desenhaFlor (300,200,10);
desenhaFlor (300,370,10);

</script>