greigs / ncc

node-chrome-canvas || a simple to use and performant HTML5 canvas for Node.js

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).

The **Canvas-** RenderingContext2D, -Gradient and -Pattern Proxys are fully implemented. The **HTML-** CanvasElement and -ImageElement Proxys only necessary properties and functions. For example they both implement a 'width' and 'height' attribute but don´t have further DOM functionality.

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

• ncc( <options> , <callback> ) >>> [canvas]
  ncc( <callback> ) >>> [canvas]

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]

• nccCanvas.getContext( nativeAPI ) >>> [context2d]

• context2d.createLinearGradient( nativeAPI ) >>> [linearGradient]
  context2d.createRadialGradient( nativeAPI ) >>> [radialGradient]
  context2d.createPattern( nativeAPI ) >>> [pattern]