How To Draw A Flower In Javascript

const ctx = canvas.getContext("2d");

const petal = [
  [
    [0, 0],
    [0.3, -1],
    [0.7, -1],
    [1, 0],
    [0.7, 1],
    [0.3, 1],
    [0, 0]
  ],
  [
    [0, 0],
    [1, 0]
  ],
];

function drawPetal(path, width, height) {
  var i = 0;
  do { // loop through paths
    const p = path[i];
    let j = 0;
    ctx.moveTo(p[j][0] * width, p[j++][1] * height);
    while (j < p.length - 1) {
      ctx.lineTo(p[j][0] * width, p[j++][1] * height);
    }
    if (p[j][0] === p[0][0] && p[j][1] === p[0][1]) { // is the path closed ?
      ctx.closePath();
    } else {
      ctx.lineTo(p[j][0] * width, p[j][1] * height)
    }
  } while (++i < path.length);
}

function drawPetals(x, y, count, startAt, petal, width, height) {
  const step = (Math.PI * 2) / count;
  ctx.setTransform(1, 0, 0, 1, x, y);
  ctx.rotate(startAt);
  for (var i = 0; i < count; i += 1) {
    drawPetal(petal, width, height);
    ctx.rotate(step);
  }
  ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default
}

function drawFlower(col, lineWidth, fitScale, petalCount) {
  ctx.strokeStyle = col;
  ctx.lineWidth = lineWidth;
  const size = Math.min(ctx.canvas.width, ctx.canvas.height) * fitScale * 0.5;
  ctx.beginPath();

  drawPetals(ctx.canvas.width / 2, ctx.canvas.height / 2, 5, -Math.PI / 2, petal, size, size * 0.2);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, size * 0.15, 0, Math.PI * 2);
  ctx.fillStyle = col;
  ctx.fill();
}


drawFlower("black", 4, 0.95, 5);

Here is what the above code is Doing:
1. We create a canvas element and a 2D context.
2. We define a petal shape as a list of paths.
3. We define a function to draw a petal shape.
4. We define a function to draw a flower.
5. We draw a flower.

The petal shape is defined as a list of paths. Each path is a list of points.

The drawPetal function takes a path and draws it.

The drawPetals function takes a position, a count, a start angle, a petal shape, a width and a height. It draws the petal shape count times, rotating it by step degrees each time.