A library to meet your confetti needs.
Check out this plunker for a live example of this library.
Need a festive celebration on your page? Confetti.js gives you the ability to control the confetti on your canvas tag with animation functions of your choosing for each piece of confetti while avoiding having to do the messy recursive logic of animating and garbage collecting.
- Include confetti.js script
- Follow
demo/demo.js
example for how to use the library - ????
- Profit!
Confetti.DEFAULT_NUM
: Default number of confetti pieces to assume - default value is 500Confetti.color()
: A helper function for randomly generating an rgba color using theMath.random
functionConfetti.randomFrom(a, b, factor)
: A helper function which takes two numbers and returns a random number from a to b, not including b. If factor is present, it is equivalent toMath.floor(Math.random() * (b - a) * factor) / factor
.Confetti.createCanvas(element, canvas)
: Takes two arguments, the DOM node for the canvas to base its dimensions off of (or an object withoffsetWidth
&offsetHeight
keys), and the canvas DOM node. Returns aCanvas
instance, which has properties:element
: the first argument fromcreateCanvas
canvas
: the second argument fromcreateCanvas
context
: the 2d context of the canvas elementwidth
: the width from the elementheight
: the height from the elementsetDimensions()
: a function that sets the canvas width and height to the same values as the element width and heightdestroy()
: a function that prepares the canvas for garbage collectingstep(confettiArray, config)
- ArgumentsconfettiArray
: array ofConfettiClass
instancesconfig
: object of key/values that are to be used to update the confettidraw(confetti)
: function that takesConfettiClass
instance and renders confetti on canvasupdatePosition(confetti, index)
: function that takesConfettiClass
instance and index in confettiArray. It's purpose is to update the position of each confetti pieceupdateState()
: (optional) function whose purpose is to update the state before render
Confetti.create(config)
: Takes a config object and returns a newConfettiClass
instanceconfig.color
: (optional) the color for the piece of confetti - defaults toConfetti.color()
config.d
: (optional) the density for the piece of confetti - defaults toConfetti.randomFrom(10, 10 + Confetti.DEFAULT_NUM)
isFlakeExiting(canvas)
: Takes aCanvas
instance and checks whether the confetti is exiting the canvas on the left, right, or bottom