Badass JavaScript

Fabric.js: An Interactive Object Model and SVG Parser for the Canvas Element

Kangax has released Fabric.js, a library that aims to make interacting with objects drawn on the canvas element easier.

Fabric.js started as a foundation for design editor on printio.ru — interactive online store with ability to create your own designs. The idea was to create Javascript-based editor, which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it’s not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by Ernest Delgado’s canvas experiment. In fact, code from Ernest’s experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

As you can see in the demo, Fabric.js is fast and produces a great user experience for manipulating a design - right in the browser.  It is also simple to use from your own code:

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

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

canvas.add(rect);

Because Fabric.js has a SVG parser, you can import complex shapes from a vector editor like Adobe Illustrator or Inkscape into your canvas element very easily.

You can check out the demo here, and get the code on Github.  Great work!

SVG-Edit: A Cross-Browser SVG Editor in JavaScript

If you have done any work with SVG, you have probably heard of Inkscape which is an open source desktop program that lets you edit SVG files without coding.  The svg-edit team have been hard at work building an SVG editor in JavaScript.  It works entirely in the browser - not even a server side component - and takes advantage of some of the latest features of cutting edge browsers, such as local file access in Firefox 3.6.  Below is a video introducing svg-edit.  It is from an old version, and many more features have been added since then.  Be sure to check them out!

SVG-Edit has really evolved from a nice technology demo, to a fully fledged application that you could use instead of something like Inkscape for most of your work.  The best part of it is that it is accessible anywhere, and it is built using standard web technologies.

You can check out the project on Google Code, and use the application itself here.  Awesome work, team!