daniellockard / canvas-waves

Generate animated waves on an HTML5 canvas

CanvasWaves.js

This library lets you easily create static or animated waves using the HTML5 <canvas> element, hence CanvasWaves.

Check out some demos here

Usage

Include the javascript file in your webpage, or use the npm package.

<script src="canvas-waves.min.js"></script>

import CanvasWaves from "canvas-waves";

This exposes a CanvasWaves object that you can use to create your waves. The only required argument is a DOM element that should contain the <canvas> element for the wave.

const wave = CanvasWaves.create(".container", {
  color: "#abc123",
  baseHeight: "20%",
  waveHeight: "50%"
});

The canvas is absolutely positioned to fill the container's width and height. To avoid overlapping other child elements, make sure to give siblings position: relative; or another CSS:

<div class="container">
  <canvas></canvas>
  <!-- The canvas element is injected here by CanvasWaves -->

  <!-- Sibling elements might need additional CSS to avoid being overlapped -->
  <div class="container__item">
    <p>Some other content</p>
  </div>
</div>

Animation

Waves are static by default. You can toggle the animation of a wave by using the .toggleAnimation() method.

const wave = CanvasWaves.create(".container", {
  color: "#abc123",
  baseHeight: "20%",
  waveHeight: "50%"
});
wave.toggleAnimation();

Delete / remove a wave

You can get rid of a wave by calling its .destroy() method.

wave.destroy(); // removes canvas from DOM

The global CanvasWaves object also keeps track of all instantiated waves in the .all property. You can also remove all instantiated waves by calling CanvasWaves.destroyAll().

Customizing the appearance of waves

Use an options object to customize the appearance and behavior of the wave. Here is a list of all possible properties to pass:

key	description	type	example
color	The background color of a wave: hexadecimal or rgb(a)	string	#abc123 or rgba(100, 200, 100, 0.5)
baseHeight	The starting height of the wave. Either a percentage (of the parent element's height) or a number of pixels is valid.	String or Number
waveHeight	How high the wave extends above the baseHeight. Either a percentage (of the parent element's height) or a number of pixels is valid.	String or Number
wavesVisible	How many waves are visible at a given time, where 1 equals a full sine wave.	Number	0.5
horizontalOffset	By default, a wave begins with the trough (lowest point) at the left. Override this setting to change the starting position of the wave.	Number (radians)	1
speed	If animation is activated, this determines how fast the wave is animated in milliseconds.	Number	12000
nodeCount	When a wave is initialized, the number of nodes required is calculated automatically. You can override the number of points on the wave by passing a value here.	Number	10
waveGrows	By default, all waves are standard sine waves. When set, this property makes them appear to grow from right to left. The larger the multiplier, the more dramatic the effect.	Number	1.2