Problemas con function

Trate de hacer la flor de dos maneras. Una circulo por circulo y me salio bien(en el codigo esta todo comentado) y luego lo quise hacer utilizando una funcion que me dibuje de una vez los 5 circulos, pero no logro hacerlo. Me podrian decir donde esta mi error del comando? Les dejo todo el código(las dos formas) Aguardo sus comentarios Gracias

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

<script>

     function dibujarCirculo() {

           var pantalla = document.querySelector("canvas");
           var pincel = pantalla.getContext("2d");
                pincel.fillStyle = "lightgray";
                pincel.fillRect(0, 0, 600, 400);

                dibujarCirculo(300,200,50,"red");
                dibujarCirculo(300,100,50,"yellow");
                dibujarCirculo(300,300,50,"blue");
                dibujarCirculo(400,200,50,"black");
                dibujarCirculo(200,200,50,"orange");

             }

             dibujarCirculo();

             </script>

y la otra forma....

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

<script>


    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");


    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);



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

        pincel.fillStyle = "yellow";
        pincel.beginPath();
        pincel.arc(300, 100, 50, 0, 2*3.14);
        pincel.fill();

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

        pincel.fillStyle = "black";
        pincel.beginPath();
        pincel.arc(400, 200, 50, 0, 2*3.14);
        pincel.fill();

        pincel.fillStyle = "orange";
        pincel.beginPath();
        pincel.arc(200, 200, 50, 0, 2*3.14);
        pincel.fill();




</script>