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 value..
secondaryColor	rgba(255, 255, 255, 0.2)	Secondary color, accepts a CSS value..
backgroundColor	transparent	Background color, accepts a CSS value..
mouseEffectsEnabled	true	Should mouse effects be enabled.

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.