canvas-party v0.0.17
Getting started
HTML canvas animations library
warning canvasParty is currently in alpha status. It is already suitable for out-of-the-box documentation use, but the API may still change between minor releases.
Installation
If you want to use CanvasParty with a JavaScript framework section in the docs
With npm:
$ npm install canvas-party
With yarn:
$ yarn add canvas-party
Basic usage
to create your first canvas first create a wrapper on witch the canvas element sits in.
then use the useCanvasParty
function with the "type" of the desired template
, this will return a custom canvas.
The final step is to append the canvas element to the wrapper.
import { useCanvasParty } from 'canvas-party'
const canvasWrapper = document.querySelector('.canvas-wrapper')
const canvasParty = useCanvasParty(canvasWrapper, { type: 'confetti' })
canvasWrapper.appendChild(canvasParty.canvas)
Template customization:
Currently only the confetti
and fire
template have customization options, putting a options attribute on other
templates will not work
interface canvasOptions {
type: templateName
options: optionsSettings
}
Example of custom confetti canvas:
const myCustomCanvas = useCanvasParty(canvasWrapper, {
type: 'confetti',
options: {
colors: ['#A3F7B5', '#DE3C4B', '#87F5FB'],
count: 450,
},
})
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago