[Proyecto] Una flor de 6 pétalos con texto en color gradiente

Hola gente! Comparto el siguiente solución que me base en el código de Melany Villalobos que lo compartió en Discord

<meta charset="UTF-8">

    <canvas id="mi-canvas" width="600" height="400"></canvas>

    <script>
        const WIDTH = 600;
        const HEIGHT = 400;
        const CENTER_X = WIDTH / 2;
        const CENTER_Y = HEIGHT / 2;
        const CIRCLE_RADIUS = 50;
        const WHITE_CIRCLE_RADIUS = 15;
        const YELLOW = "#FCC400";
        const WHITE = "#FFFFFF";
        const BROWN = "#8B4513";

        const pantalla = document.getElementById("mi-canvas");
        const pincel = pantalla.getContext("2d");

        function dibujarCirculo(x, y, radio, color) {
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, radio, 0, Math.PI * 2);
            pincel.fill();
        }

        // Dibujar fondo
        pincel.fillStyle = "lightgray";
        pincel.fillRect(0, 0, WIDTH, HEIGHT);

        // Dibujar círculo central y círculos amarillos
        dibujarCirculo(CENTER_X, CENTER_Y, CIRCLE_RADIUS, YELLOW);
        const ANGLES = [60, 120, 180, 240, 300, 360];
        ANGLES.forEach((angle) => {
            const x = CENTER_X + CIRCLE_RADIUS * Math.cos((angle * Math.PI) / 180);
            const y = CENTER_Y + CIRCLE_RADIUS * Math.sin((angle * Math.PI) / 180);
            dibujarCirculo(x, y, CIRCLE_RADIUS, YELLOW);
        });

        // Dibujar círculos blancos en el círculo central
        const WHITE_CIRCLE_ANGLES = [30, 90, 150, 210, 270, 330];
        WHITE_CIRCLE_ANGLES.forEach((angle) => {
            const x = CENTER_X + (CIRCLE_RADIUS - WHITE_CIRCLE_RADIUS) * Math.cos((angle * Math.PI) / 180);
            const y = CENTER_Y + (CIRCLE_RADIUS - WHITE_CIRCLE_RADIUS) * Math.sin((angle * Math.PI) / 180);
            dibujarCirculo(x, y, WHITE_CIRCLE_RADIUS, WHITE);
        });

        // Dibujar círculo marrón en el centro
        dibujarCirculo(CENTER_X, CENTER_Y, WHITE_CIRCLE_RADIUS, BROWN);

        // Agregamos texto en color gradiente
        const FONT_SIZE = 30;
        const FONT_STYLE = `${FONT_SIZE}px sans-serif`;

        pincel.font = FONT_STYLE;
        let gradient = pincel.createLinearGradient(0, 0, WIDTH, 0);
        gradient.addColorStop(0, "#01a219"); // verde
        gradient.addColorStop(1, "#0035cd"); // azul
        pincel.fillStyle = gradient;
        pincel.textAlign = "center";
        pincel.fillText("Flor de 6 pétalos", CENTER_X, HEIGHT - FONT_SIZE);

    </script>

Código de Melany Villalobos:

<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(320, 220, 20, "yellow");
    dibujarCirculo(328, 200, 20, "white");
    dibujarCirculo(320, 180, 20, "yellow");
    dibujarCirculo(300, 175, 20, "white");
    dibujarCirculo(285, 180, 20, "yellow");
    dibujarCirculo(278, 195, 20, "white");
    dibujarCirculo(279, 210, 20, "yellow");
    dibujarCirculo(289, 220, 20, "white");
    dibujarCirculo(310, 220, 20, "yellow");

    dibujarCirculo(300, 200, 15, "brown");
</script>