canvas-lightning

Canvas lightning app

Canvas lightning generator.

See the example.

Installation

Run command: npm i canvas-lightning

Usage

import canvasLightning from 'canvas-lightning';

const canvasEl = document.querySelector('canvas');

const app = canvasLightning(canvasEl, {
  WIDTH: 100,
  HEIGHT: 200
});

app.start();

window.addEventListener('resize', start);

/* Cleanup*/
app.stop();

Configuration

{
  /* Minimal deviation from center */
  MIN_X: 1,

  /* Maximum deviation from center */
  MAX_X: 10,

  /* Minimum step down */
  MIN_Y: 2,

  /* Maximum step down */
  MAX_Y: 10,

  /* Refresh interval. */
  LOOP_INTERVAL: 100,

  /* Thickness of the lightning. */
  LINE_WIDTH: 3,

  /* Blur surrounding the line. */
  LINE_BLUR: 10,

  /* How are the curves rounded? */
  LINE_JOIN: 'miter',

  /* Color of the lightning */
  COLOR_LIGHT: '#fff',

  /* Color of the surrounding blur. */
  COLOR_BLUR: '#0ff',

  /* Background color.  */
  COLOR_BG: 'transparent',

  /* How many images should be cached.
   * After filing in the cache, no more renders will be done,
   * but existing snapshots will be used. */
  CACHE_COUNT: 10,

  /* Size of the canvas to be set. */
  WIDTH: 2,
  HEIGHT: 2
}