Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    nccpublic

    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]

    install

    npm i ncc

    Downloadsweekly downloads

    27

    version

    0.3.6

    license

    MIT

    homepage

    github.com

    repository

    githubgithub

    last publish

    collaborators

    • avatar