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 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.