Celebrate more with this HTML5 canvas enabled confetti library 🎊 Build to be fast, easy to use and lightweight (~3kb minified and gzipped)
Celebrate right now at the demo page
Using the code snippet below will render a full screen stream of confetti on a canvas.
const Canfetti = require('./canfetti.js');
const myCanfetti = new Canfetti({ canvasId: 'some-canvas-id' });
myCanfetti.startStream();The Canfetti constructor (e.g. new Canfetti()) has the following options
| Option | Type | Default | Description |
|---|---|---|---|
canvasId |
string | 'canfetti' | ID of the canvas HTMLElement that will render the confetti |
| Method | Description |
|---|---|
| startStream | Start a stream of confetti from the top of the screen |
| stopStream | Stop the stream of confetti |
| toggleStream | Toggle between starting and stopping the stream of confetti |
| startBurst | Adds listener for mouse clicks, generating a burst of confetti on each click |
| stopBurst | Removes the listener for mouse clicks |
Canfetti allow for chaining of methods, like this:
const myCanfetti = new Canfetti();
myCanfetti.startStream().startBurst();MIT