addbackground

Beautiful canvas backgrounds made easy.

Usage no npm install needed!

<script type="module">
  import addbackground from 'https://cdn.skypack.dev/addbackground';
</script>

README

addbackground

Beautiful canvas backgrounds made easy.

npm npm NPM

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.