node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

ncc

logo

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

learn how to setup ncc and draw shapes to canvas

learn how to start using ncc even before it is fully set up

learn how to get return values of non-void functions

learn how to use gradients and patterns

learn how to apply images from urls or the filesystem

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

flowchart

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]