ncc v0.3.6
About
ncc (or node-chrome-canvas) utilizes Googles Chrome-Browser and its remote debugging protocol to give Node.js access to a full-blown HTML5 Canvas-Element and its 2d-Context.
In contrast to canvas (that may satisfy your needs as well) which uses Cairo to sham a canvas, ncc works with a real HTMLCanvasElement in a Browser-Context.
Behind the curtains of the familiar Canvas-API, ncc uses a single WebSocket-Connection and some command-bundeling-logic to gain its performance.
Quickstart
npm install ncc
var ncc = require('ncc')
var canvas = ncc();
canvas.width = canvas.height = 256;
var ctx = canvas.getContext('2d');
ctx.fillStyle = "slateGray";
ctx.fillRect(28, 28, 200, 200)(); // function call is intentional!
Examples
- draw ncc logo
learn how to setup ncc and draw shapes to canvas
- early access
learn how to start using ncc even before it is fully set up
- get return values
learn how to get return values of non-void functions
- gardients/patterns
learn how to use gradients and patterns
- images
learn how to apply images from urls or the filesystem
- shadow canvas
learn how work with more than one canvas
API
ncc follows the native Web API Interfaces... HTMLCanvasElement, HTMLImageElement, CanvasRenderingContext2D, CanvasGradient, CanvasPattern ... as close as possible.
Differences are a result of the asynchronous nature of ncc. All object creations, method calls and property manipulations don't get processed directly, but get serialized and stored until a return value is necessary and a request is therefore unavoidable.
Every 'Object' provided by ncc (and also every return value of a method) is actually a function to trigger a synchronization. You can pass a error-first-callback ( 'function(error, result){...}' ) to such a function to receive the return value of the last action (see examples).
Methods and properties beyond the native API are marked with a leading underscore and they are hidden from console by default (e.g. 'image._toFile(fileName, <callback>)' to write an image to the filesystem).
proxy - creators
options (with defaults)
{ logLevel: 'info', //['log','info','warn','error']
port: 9222,
retry: 9,
retryDelay: 500,
headless: false
}
ncc.createCanvas() >>> canvas if one is not enough
ncc.createImage( <src> , <onloadFn> , <onerrorFn> ) >>> image
context2d.createLinearGradient( nativeAPI ) >>> linearGradient
context2d.createRadialGradient( nativeAPI ) >>> radialGradient
context2d.createPattern( nativeAPI ) >>> pattern