catdad.github.io/canvas-confetti
You can install this module as a component from NPM:
npm install --save canvas-confetti
You can then require('canvas-confetti');
to use it in your project build. Note: this is a client component, and will not run in Node. You will need to build your project with something like webpack in order to use this.
You can also include this library in your HTML page directly from a CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
Note: you should use the latest version at the time that you include your project. You can see all versions on the releases page.
When installed from npm
, this library can be required as a client component in your project build. When using the CDN version, it is exposed as a confetti
function on window
.
confetti
takes a single optional object. When window.Promise
is available, it will return a Promise to let you know when it is done. When promises are not available (like in IE), it will return null
. You can polyfill promises using any of the popular polyfills. You can also provide a promise implementation to confetti
through:
const MyPromise = require('some-promise-lib');
const confetti = require('canvas-confetti');
confetti.Promise = MyPromise;
If you call confetti
multiple times before it is done, it will return the same promise every time. Internally, the same canvas element will be reused, continuing the existing animation with the new confetti added. The promise returned by each call to confetti
will resolve once all animations are done.
The confetti
parameter is 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 definedangle
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): Thex
position on the page, with0
being the left edge and1
being the right edge.origin.y
Number (default: 0.5): They
position on the page, with0
being the top edge and1
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.
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);
}
}());