canvas_render_star.ts

import { CanvasRenderingContext2D, createCanvas } from "canvas"

function renderStar(ctx: CanvasRenderingContext2D, cx: number, cy: number) {
  const spikes = 5
  const outerRadius = 30
  const innerRadius = 20
  const lineWidth = 7
  const strokeStyle = "#f4f4f5"
  let rot = (Math.PI / 2) * 3
  let x = cx
  let y = cy
  const step = Math.PI / spikes

  ctx.strokeStyle = "#000"
  ctx.beginPath()
  ctx.moveTo(cx, cy - outerRadius)
  for (let i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius
    y = cy + Math.sin(rot) * outerRadius
    ctx.lineTo(x, y)
    rot += step

    x = cx + Math.cos(rot) * innerRadius
    y = cy + Math.sin(rot) * innerRadius
    ctx.lineTo(x, y)
    rot += step
  }
  ctx.lineTo(cx, cy - outerRadius)
  ctx.closePath()
  ctx.lineWidth = lineWidth
  ctx.strokeStyle = strokeStyle
  ctx.stroke()
  // ctx.fillStyle = "skyblue"
  ctx.fill()
}
                             
const canvas = createCanvas(width, height)
const ctx = canvas.getContext("2d")
await renderStar(ctx, 60, 55)
await renderStar(ctx, 180, 55)