Confetti animation in JavaScript

function confetti(canvas, x0, y0, count = 160) {
  const g = canvas.getContext('2d')
  const colors = ['#ff5a5f', '#ffd166', '#06d6a0', '#118ab2', '#f78c6b']
  const pieces = Array.from({ length: count }, () => {
    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 1.2
    const speed = 700 + Math.random() * 500 // px per second
    return {
      x: x0, y: y0,
      vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed,
      rot: Math.random() * Math.PI, spin: (Math.random() - 0.5) * 14,
      color: colors[(Math.random() * colors.length) | 0],
    }
  })
  let last = performance.now()
  function frame(now) {
    const dt = Math.min(0.033, (now - last) / 1000)
    last = now
    g.clearRect(0, 0, canvas.width, canvas.height)
    let alive = 0
    const drag = Math.exp(-2.4 * dt)
    for (const p of pieces) {
      p.vx *= drag
      p.vy = p.vy * drag + 1100 * dt // gravity
      p.x += p.vx * dt
      p.y += p.vy * dt
      p.rot += p.spin * dt
      if (p.y < canvas.height + 20) alive++
      const flip = Math.cos(p.rot * 2)
      g.save()
      g.translate(p.x, p.y)
      g.rotate(p.rot)
      g.scale(1, flip) // edge-on when flip is near 0
      g.fillStyle = p.color
      g.globalAlpha = flip < 0 ? 0.75 : 1 // a darker back
      g.fillRect(-6, -3.5, 12, 7)
      g.restore()
    }
    if (alive) requestAnimationFrame(frame)
    else g.clearRect(0, 0, canvas.width, canvas.height)
  }
  requestAnimationFrame(frame)
}