Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

Goals

• Unit tested
• Modular
• Cross-browser
• Fast

Supported browsers

• Firefox 2+
• Safari 3+
• Opera 9.64+
• Chrome 1+

Building

1. Install Sprockets

    $ gem install --remote sprockets
   

2. Build distribution file

    $ sprocketize fabric.js > dist/all.js
   

Examples of use

Adding red rectangle to canvas

<canvas id="canvas" width="300" height="300"></canvas>  
...

var canvas = new Canvas.Element('canvas');

var rect = new Canvas.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});

canvas.add(rect);

Credits

• Ernest Delgado for the original idea of manipulating images on canvas.
• Maxim "hakunin" Chernyak for ideas, and help with various parts of the library.
• Sergey Nisnevich for help with geometry logic.