Back to blog
Add

Introducing node-canvas. Server side HTML5 canvas API

TJ // November 5th 2010 // 

Today we open sourced our latest project, node-canvas, a canvas implementation for nodejs. The project is a work in progress, however  a large portion of the api is complete, including node-specific additions such as Canvas#toBuffer() and Canvas#createPNGStream().

Screencast GitHub

Examples

Shown below is the test suite running side by side with the browser implementation. node-canvas renders the left, and the browser (chrome) renders the canvas on the right using the same code.

Below is an example of chrome rendering flot on the left, and node-canvas on the right.

In the next few days we’re going to publish an article on why we decided to create it, how we’re leveraging it to power our reporting features for print stylesheets, old browsers and mobile compatibility.

How to use

Make sure to install cairo. On OS X you can use macports for example:

Install it with npm

then require() it and use it just like you would use canvas on the browser

Add
  • http://workingdraft.de/2 Revision 2: mod_pagespeed, Sub-Pixel-Positionierung und viel Hall | Working Draft

    [...] node-canvas: Canvas für node.js [...]

  • http://www.deadlock.it/programming/javascript/node-roundup-13/ Node Roundup | tips & tricks

    [...] are continuing to make some amazing open source contributions, this time in the form of node-canvas. This is a server-side Canvas API that you can use to generate images. That opens up a lot of [...]

  • http://jsmag.com/blog/2010/11/news-roundup-node-canvas-jquery-mobile-alpha-2-gordon/ JavaScript Magazine Blog for JSMag » Blog Archive » News roundup: node-canvas, jQuery Mobile Alpha 2, Gordon

    [...] node-canvas (on GitHub) is a project to get the HTML5 canvas API working on the server. On first glance this may seem completely pointless, but as you begin to think about it, it really makes sense. There are still a lot of people using browsers that don’t have canvas support, which makes it a pain to provide fallback content. A server-side implementation of the canvas API greatly helps this process. [...]

  • http://zapisnik.pepiino.cz/dalsi-porce-zajimavosti-kolem-javascriptu-a-webu/ Další porce zajímavostí kolem Javascriptu a webu | pepiino.cz

    [...] HTML5 Canvas na serveru? Ale jistě! [...]

  • http://codificando.com/2010/12/ultimas-de-2010-sobre-nodejs/ Ultimas de 2010 sobre Node.JS | codificando.com – Emerson Macedo

    [...] Outro grande destaque desse fim de ano foram os 2 projetos relacionados ao Canvas 2D, um da LearnBoost e outro da ajax.org. Acabam sendo concorrentes uma da outra, mas espero que aconteça um merge em breve. Vale a pena conferir o da ajax.org e o da LearnBoost. [...]

  • http://functionscopedev.wordpress.com/2011/04/11/phantomjs-nearly-headless-nick-for-the-web/ PhantomJS; Nearly Headless Nick for the Web | FunctionScope Development

    [...] the JavaScript side, and a lot of great folks have implemented Web features for Node. For example, node-canvas from the amazing [...]

  • http://perfectionkills.com/fabric-js-0-5-is-out/ Perfection kills » Fabric.js 0.5 is out

    [...] can now run on a server, under Node.js, thanks to wonderful jsdom and node-canvas libraries. It’s basically a wrapper on top of node-canvas that’s on top of jsdom [...]

  • http://iloveshare.sinaapp.com/?p=215 Perfection kills » Fabric.js 0.5 is out | 前端分享

    [...] can now run on a server, under Node.js, thanks to wonderful jsdom and node-canvas libraries. It’s basically a wrapper on top of node-canvas that’s on top of jsdom that’s on [...]

  • http://www.dafishinsea.com/blog/2011/09/22/life-forms-my-js10k-entry-is-live/ Da Fish in Sea » Blog Archive » LIFE Forms – my JS10k entry is live!

    [...] a lot of time implementing compression hacks like converting the code and data into images using node-canvas. Turns out I may not have needed to worry about that as the competition now lets you submit a .zip [...]

blog comments powered by Disqus