Fabric.js (http://fabricjs.com/) is a feature-rich Javascript library for creating interactive graphics for the HTML5 Canvas with extensive, well-written tutorials (http://fabricjs.com/articles/) with a glaring shortcoming. They start in the middle–leaving high and dry the intermediate Javascript/HTML programmer who wants a short but complete “hello, world” program as a starting point and who doesn’t immediately grok the

This article hopes to bridge the gap so that you can write short HTML programs testing out Fabric.js based on those tutorials and try out the myriad services it provides. You should enjoy this. Javascript graphics libraries are fun to play with and Fabric.js in particular is a well-designed joy.

In three  lines of Javascript plus an HTML <canvas> tag you can create a graphic or text objects that can be resized, rotated, and moved. With a few more lines you can create graphics primitives with simple animations, graphic objects that can be grouped, and event listeners that respond to events such as mouse clicks.

This program you write will contain just 3 lines of Javascript and will do much more than this:

fabric.js tutorial 2013 addtext

When you run it, you’ll be able to select the text:

fabric.js tutorial 2013 text resize

 

Move it:

fabric.js tutorial 2013 text move

Resize it:

fabric.js tutorial 2013 text resized

And even rotate it:

fabric.js tutorial 2013 text rotate

 

All with 3, count ’em, 3, lines of Javascript. Click here to try it yourself.

Get to the Good Part First: The

Full HTML and Javascript For Your First Fabric.js Program

Here’s all the HTML you need to try out Fabric.js:

Part 2 of this tutorial shows you how to put together your own Fabric.js app by explaining each section of this example code.

Update June 25

Moved script tag to bottom of page