Ayuda con el ejercicio de la flor

Asumo que te refieres al radio de la circunferencia, ese será nuestra referencia para que cada círculo tenga la misma área y así poder ubicar bien cada centro.

Mí código quedo de la siguiente manera:

<meta charset="UTF-8">

<h2>Círculos</h2>

<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);

    function dibujarCirculo(x, y, radio, color) {

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();
    }

    dibujarCirculo(300,220,10,"blue");
    dibujarCirculo(300,200,10,"red");
    dibujarCirculo(300,180,10,"yellow");
    dibujarCirculo(280,200,10,"orange");
    dibujarCirculo(320,200,10,"black");

</script>

Y obtuve lo siguiente:

El mío lo hice de 20. Espero que esté bien:

Muchas gracias y ¿supongo que ese numero es a elegir por que no lo dice el ejercicio?

Si, así es, la idea es que tome la forma de la flor independientemente del tamaño

Yo tengo un problema con mi codigo y es que me grafica todos los circulos con el ultimo color que uso

Sería bueno que pases tu código o una captura del mismo para poder revisarlo. :)

Este es mi codigo

<meta charset='UTF-8'>

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

<script>
    function saltarlinea() {
        document.write('<br>');
    }
    function imprimir(frase) {
        document.write(frase);
    }

    function dibujarCuadrado(x,y,color) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');
        var ancho=0;
        var alto=0;
        for (ancho=0;ancho<x;ancho++) {
            for(alto=0;alto<y;alto++) {
                pincel.fillStyle=color;
                    pincel.fillRect(50*ancho,50*alto,50,50);
                    pincel.strokeStyle='black';
                    pincel.strokeRect(50*ancho,50*alto,50,50);
            }
        }

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

    function circuloRojo(x,y,radio) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');

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

    }
    function circuloAzul(x,y,radio) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');

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

    }
    function circuloAmarillo(x,y,radio) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');

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

    }
    function circuloNegro(x,y,radio) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');

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

    }
    function circuloNaranja(x,y,radio) {
        var pantalla= document.querySelector("canvas");
        var pincel= pantalla.getContext('2d');

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

    }

    circuloRojo(300,200,50);

    circuloAzul(300,300,50);

    circuloAmarillo(300,100,50);

    circuloNegro(400,200,50);

    circuloNaranja(200,200,50);

</script>

Intenta cambiar las comillas:

Ejemplo: de 'orange' a "orange"