Nayuki Canvas

Nayuki Canvas a floating node HTML5 canvas with zero dependencies and lovably simple setup.

Install

$ npm install nayuki-canvas --save

Setup (as global)

<script src="./path/to/node_modules/nayuki-canvas/dist/nayuki-canvas.min.js">

Also consumable as Javascript Module and AMD

Usage

var canvas = document.getElementById('canvas');
var config = {};
var myCanvas = nayukiCanvas(canvas, config).start();

API

Configuration Options

| Name | Type | Default | Description | |---|---|---|---| | extraEdges | Number | 20 | Recommendation on how many edges should appear | | nodeCount | Number | 70 | Amount of nodes to render | | network | String | 'balanced' | Other network styles: mesh & wheel | | repulsion | Number | 1 | Speed at which nodes move from one another | | borderFade | Number | -0.02 | Place where nodes fade on canvas edge | | fadeInRate | Number | 0.06 | Rate of nodes fade on create | | fadeOutRate | Number | 0.03 | Rate of nodes fade on destroy | | frameInterval | Number | 20 | Speed of canvas | | background | Array/String | ['#0275d8', '#055396'] | String and array HEX values | | gradient | String | 'radial' | Gradient styles: linear, radial | | nodeColor | String | '#f1f1f1' | HEX value of node color | | edgeColor | String | '#b4b4b4' | HEX value of edge color | | edgeSize | Number | 0.7 | Thickness of edge | | nodeSize | Number | 900 | Size of node |

Starting & Stopping

myCanvasInstance.start(); // Start Canvas
myCanvasInstance.stop(); // Freeze Frame™

Updating

myCanvasInstance.nodeSize = 450;
// On next frame render nodes will have new size

Removing

myCanvasInstance.destroy();

Checking Browser Support

if (nayukiCanvas.isSupported) {
  // canvas time
}

Manual Frame Rendering

myCanvasInstance.start().stop(); // queue and cancel frame render
myCanvasInstance.next(); // manually draw next frame

Created by

| ---|--- Matt Jensen | Nayuki

Version

• Version 0.0.1

License

• MIT LICENSE