Fabric.js 0.5 is out

← back 398 words 22 August 2011

Remember that fabulous canvas library that makes working with canvas a breeze? The one that can parse SVG files on the fly and fluently draw them on canvas; that can render complex text in real time; that can morph objects with a touch of a mouse; with sophisticated, programmatically-accessible object model; easy to use animation and event infrastructure?

Why yes, of course I’m talking about Fabric.js ;)

Version 0.5 is out and here’s a quick overview of 3 main changes:

Node.js & NPM support

Fabric 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 top of node.

Fabric is also registered as NPM package, so can be installed with the usual one-liner:


> npm install fabric

Here’s how you would use it:


var fabric = require('fabric').fabric,
    canvas = fabric.createCanvasForNode(200, 200);

canvas.add(new fabric.Rect({
  top: 100,
  left: 100,
  width: 100,
  height: 50,
  angle: 30,
  fill: 'rgba(255,0,0,0.5)'
}));

var out = require('fs').createWriteStream(__dirname + '/rectangle.png'),
    stream = canvas.createPNGStream();

stream.on('data', function(chunk) {
  out.write(chunk);
});

.. and here’s what the resulting image would be — 30° rotated half-transparent, red rectangle.

I'm really excited about Node support in fabric. We'll be using it in production on Printio.ru shortly.

Custom builder

It’s now possible to create custom fabric build, including only those modules that you need. The build process was rewritten to use Node.js instead of Sprockets. Building can only be done via command line for now. Online interface is likely to come in the future:


> node build.js modules=xxx,yyy,zzz

.. where “xxx”, “yyy”, and “zzz” are the names of the modules. Currently available modules are “text”, “serialization”, “parser”, and “node”. By default none of these modules are included. If you wish to include all of the modules, you can use “ALL” keyword:


> node build.js modules=ALL

Smaller footprint

By moving some of the functionality into optional modules (e.g. “parser” and “serialization”), default minimalistic version of fabric is now ~76KB (~22KB gzipped). There’s still more reduction that can be done, so expect even smaller footprint in the near future.

Enjoy.

Did you like this? Donations are welcome