Canfetti 🎊

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

Basic example

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