canvas-confetti

Demo

catdad.github.io/canvas-confetti

API

This library is exposed as a confetti function on window. It takes a single optional options object, which has the following properties:

• particleCount Integer (default: 50): The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.
• angle Number (default: 90): The angle in which to launch the confetti, in degrees. 90 is straight up.
• spread Number (default: 45): How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.
• startVelocity Number (default: 45): How fast the confetti will start going, in pixels.
• decay Number (default: 0.9): How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.
• ticks Number (default: 200): How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.
• origin Object: Where to start firing confetti from. Feel free to launch off-screen if you'd like.
  • origin.x Number (default: 0.5): The x position on the page, with 0 being the left edge and 1 being the right edge.
  • origin.y Number (default: 0.5): The y position on the page, with 0 being the top edge and 1 being the bottom edge.
• colors Array<String>: An array of color strings, in the HEX format... you know, like #bada55.
• zIndex Integer (default: 100): The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher.

Examples

Launch some confetti the default way:

confetti();

Launch a bunch of confetti:

confetti({
  particleCount: 150
});

Launch some confetti really wide:

confetti({
  spread: 180
});

Get creative. Launch a small poof of confetti from a random part of the page:

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
  }
});

I said creative... we can do better. Since it doesn't matter how many times we call confetti (just the total number of confetti in the air), we can do some fun things, like continuously launch more and more confetti for 30 seconds, from multiple directions:

// 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);
  }
}());