0.0.3 • Published 3 years ago
addbackground v0.0.3
Installation
TypeSocket is available on npm, you can install it with either npm or yarn:
npm install addbackground
# or:
yarn install addbackgroundExample usage
import { addBackground } from 'addbackground';
const canvas = document.getElementById('backgroundCanvas');
addBackground({ canvas, type: 'bubbles' });API
addBackground
addBackground is the main function that adds a background to the selected canvas and keeps rendering it.
It accepts one argument of type BackgroundOptions and returns an instance of BackgroundControls.
BackgroundOptions
BackgroundOptions is an object that has the following properties:
| Property | Default value | Description |
|---|---|---|
| canvas | undefined | Canvas element to render to. (required) |
| type | undefined | Background type, currently: either 'ripples' or 'bubbles'. (required) |
| primaryColor | rgba(255, 255, 255, 0.2) | Primary color, accepts a CSS value.. |
| secondaryColor | rgba(0, 0, 0, 0.2) | Secondary color, accepts a CSS value.. |
| backgroundColor | transparent | Background color, accepts a CSS value.. |
BackgroundControls
isPlaying: boolean
Returns the playback state of the animation.
setIsPlaying: (value: boolean) => void
Sets the playback state of the animation.
stop: () => void
Disassembles the animation, clears the canvas. Further playback is impossible after this function is called.