canvas-confetti

Include the library directly in your HTML page by adding a <script> tag pointing to the JSDelivr CDN. Ensure you use the latest version available.

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>

Install the canvas-confetti module as a dependency using npm.

Note: This is a client-side component and cannot run in Node.js. You must use a bundler like webpack to build your project for the browser.

npm install --save canvas-confetti

To support users who have enabled prefers-reduced-motion in their system settings, use the disableForReducedMotion option. When this option is active, confetti animations will be suppressed for those users to avoid chaotic motion that might cause discomfort.

This option is currently disabled by default.

Use the origin option to control where the confetti starts. The origin object takes x and y coordinates (typically normalized between 0 and 1).

confetti({
  particleCount: 100,
  startVelocity: 30,
  spread: 360,
  origin: {
    x: Math.random(),
    // since they fall down, start a bit higher than random
    y: Math.random() - 0.2
  }
});

You can increase the density of the burst by providing an options object with the particleCount property.

confetti({
  particleCount: 150
});

To trigger a standard confetti burst using the default configuration, call the confetti() function without any arguments.

confetti();

Because calling confetti multiple times simply adds to the total number of particles in the air, you can use requestAnimationFrame to create continuous effects. This example launches confetti from both the left and right edges of the screen for a set duration.

// do this for 30 seconds
var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  // launch a few confetti from the left edge
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  // and launch a few from the right edge
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });

  // keep going until we are out of time
  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

To control how wide the confetti spreads, use the spread option (measured in degrees).

confetti({
  spread: 180
});

The primary API is the confetti() function. It launches a burst of confetti and returns a Promise that resolves when the animation is complete. If window.Promise is unavailable (e.g., in IE), it returns null.

If you call confetti() multiple times before the previous animation finishes, the library reuses the same canvas and continues the existing animation with the new particles. The returned promise will resolve once all active animations are done.

// Basic usage
confetti();

// Using options
confetti({
  particleCount: 100,
  spread: 70,
  origin: { x: 0.5, y: 0.5 }
});

The reset() method stops all active animations and clears all confetti from the canvas. It also immediately resolves any outstanding promises.

• For the global instance, call confetti.reset().
• For an instance created via confetti.create(), call .reset() on the returned function.

// Reset global confetti
confetti();
setTimeout(() => {
  confetti.reset();
}, 100);

// Reset a custom instance
var myConfetti = confetti.create(myCanvas, { resize: true });
myConfetti();
setTimeout(() => {
  myConfetti.reset();
}, 100);

Use confetti.shapeFromPath({ path, matrix? }) to create a custom shape from an SVG Path string.

Caveats:

• All paths are filled (stroke is not supported).
• Paths are limited to a single color.
• For performance, it is recommended to calculate the matrix once in development and cache it for production.
• Requires browser support for Path2D.

Pass the returned Shape object into the shapes array in your confetti() options.

var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });

confetti({
  shapes: [triangle]
});