Author: Kiril Vatev
Description: Component for drawing confetti on a canvas
Keywords: canvas,confetti,component,module,animation,javascript,catdad

# Canvas Confetti

## Basic Cannon

The default mode... just your regular basic average blast of confetti. But it's still a little cool, right?

## Random Direction

Go crazy with some randomness. Shoot a random amount of confetti in random directions. (Go ahead... you know you want to click that button more than once.)

## Realistic Look

If you happened to get curious and changed the particle count to 400 or so, you saw something disappointing. An even "flattened cone" look to the confetti, making it look way too perfect and ruining the illusion. We can fix that by mixing a few effects together.

## Fireworks

Why click a button repeatedly when you can have code do it for you? Shoot some firework of confetti from the sides of page so you can still read the content in the center.

## Stars

You can combine multiple calls to confetti with any settings in order to create a more complex effect. Go ahead, combine different shapes, sizes, etc. Stagger them for an extra boost of excitement.

✨ Celebrate with a burst of stars! ✨

## Snow

The effect is not limited to crazy rapid fire of confetti though. You can create a wintery mood with gently falling particles across the entire page.

## School Pride

But if you are into crazy rapid fire of confetti, what could be a better use than to show everyone what you are all about? Tell people where you are from with two confetti cannons from either side of the page.

🌰 Go Buckeyes! 🌰

## Custom Shapes

Celebrate some holidays with holiday-appropriate shapes! You can use any SVG path to make a confetti out of it. Go wild!

🎃🎄💜

## Emoji

Don't know any custom shapes? That's okay, just use emoji instead! That's what they are for anyway. I mean... why do they even exist if we weren't supposed to make confetti out of them? Think about it.

## Custom Canvas

But if you just hate confetti all over the place, there's something here for you as well. You can limit where the confetti appear by providing your own canvas element.