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;var config = {};var myCanvas = 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
myCanvasInstancestart; // Start CanvasmyCanvasInstance; // Freeze Frame™
Updating
myCanvasInstancenodeSize = 450;// On next frame render nodes will have new size
Removing
myCanvasInstance;
Checking Browser Support
if nayukiCanvasisSupported // canvas time
Manual Frame Rendering
myCanvasInstancestart; // queue and cancel frame rendermyCanvasInstancenext; // manually draw next frame
Created by
Matt Jensen | Nayuki |
Version
- Version 0.0.1