Nayuki-canvas NPM

Nayuki Canvas

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

Screenshot software

$ npm install nayuki-canvas --save

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

Also consumable as Javascript Module and AMD

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

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

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

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

myCanvasInstance.destroy();

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

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


Matt Jensen	Nayuki

9 years ago

9 years ago