nayuki-canvas

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