canvas-waves v2.1.2

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: