Canvas Tag Confetti Sample

(function confettiAnime() {
  // <canvas id="canvas"></canvas>
  var canvas = document.getElementById('canvas')
  canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true })
  canvas.confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
    ticks: 1000,
    zIndex: -1,
    colors: [
      '#ff9e9e',
      '#ff9eff',
      '#9e9eff',
      '#9effff',
      '#9eff9e',
      '#ffff9e',
    ]
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

元記事を表示する