search

indus / ncc

node-chrome-canvas || a simple to use and performant HTML5 canvas for Node.js
Other
172 stars 6 forks source link

readme

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

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

options (with defaults)

{ logLevel: 'info', //['log','info','warn','error']
  port: 9222,
  retry: 9,
  retryDelay: 500,
  headless: false
}