Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



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.


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!


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


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]


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







No packages published