addbackground
v0.0.3 canvas library typescript background
addbackground
Beautiful canvas backgrounds made easy.
Installation
TypeSocket is available on npm, you can install it with either npm or yarn:
npm install addbackground
# or:
yarn install addbackground
Example 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 |
secondaryColor | rgba(0, 0, 0, 0.2) |
Secondary color, accepts a CSS |
backgroundColor | transparent |
Background color, accepts a CSS |
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.
npm i addbackground
Metadata
- BSD-3-Clause-Clear
- Whatever
- Mat Sz
- released 12/24/2020