Drawing Shapes with the Fabric.js Canvas Library

Fabric.js is a HTML5 canvas library that enables drawing on canvas and manipulating canvas objects in an object-oriented way. It also provides a certain level of interactivity by implementing scaling and rotation functionalities. Finally, Fabric.js can convert canvas to SVG and vice-versa.

Installation and Usage

Fabric.js can be loaded either from a CDN (Content Delivery Network) or locally. Add the following code near the end of your page:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>

Then, place the canvas at the desired position on your page:

<canvas id="mycanvas" width="920" height="450"></canvas>

Finally, instantiate the Fabric.js library on that HTML5 canvas element:

var canvas = new fabric.Canvas('mycanvas', {});

Notice the canvas variable — it is now an instance of fabric.Canvas object, which will later be used to add/remove shapes, configure events and more.

Fabric.Canvas class can also accept additional parameters, which can be used to set some global configuration options for the canvas:

var canvas = new fabric.Canvas('mycanvas', { selectionBorderColor: 'red', selectionColor: 'transparent', selectionLineWidth: 1, selection: false, controlsAboveOverlay: true, centeredScaling: true });

Drawing Shapes

There 7 shape types in Fabric.js. These are:

Circle (fabric.Circle)
Ellipse (fabric.Ellipse)
Line (fabric.Line)
Polygon (fabric.Polygon)
Polyline (fabric.Polyline)
Rectangle (fabric.Rect)
Triangle (fabric.Triangle)

If you want to create, for example, a rectangle, just create an instance of fabric.Rect class and add it to the canvas:

var object = new fabric.Rect({ width: 100, height: 100, fill: 'blue', opacity: 1, left: 0, top: 0 }); canvas.add(object);

This code would create a 100x100px rectangle in the top left corner of the canvas. To draw a circle, do the following:

var object = new fabric.Circle({ radius: 15, fill: 'blue', left: 100, top: 100 }); canvas.add(object);

Each shape type has some common and some specific properties. The common properties are inherited from the parent class — fabric.Object. That means that you can extend fabric.Object to include custom methods that will be applied to all shapes. For example, the common properties are left, top and fill, while the specific ones are radius, width and height. After the shape has been created, any of these properties can be easily edited:

object.set('fill', 'green');

In this example, Fabric.js will automatically change the color of the corresponding shape to green. Every change to the object properties is immediately rendered on canvas.

It is also possible to add custom properties to the object:

object.set('itemdata', { myid: 1, mylabel: "Name of the object" });

Custom properties allow you to handle complex use-cases by associating your own data with canvas objects. To fetch these data, just do the following:

object.get('itemdata');

Removing an object from the canvas is done in a similar way to adding them:

canvas.remove(object); // object variable is a reference to a previously added shape

Drawing Images

In Fabric.js, images are represented with fabric.Image object. The images can be created from a HTML element:

var image = new fabric.Image(document.getElementById('img_element_id'), { width: 100, height: 100, left: 50, top: 50 }); canvas.add(image);

However, it is also possible to create an image from a URL:

fabric.Image.fromURL('http://domain.com/path_to_image.png', function(image) { canvas.add(image); });

Image is also a child class of fabric.Object and contains its properties and methods.

Interactivity Settings

Scaling and rotating can be enabled or disabled on a per-object basis — just change the corresponding properties of a shape object:

var object = new fabric.Rect({ width: 100, height: 100, fill: 'blue', opacity: 1, left: 0, top: 0, hasRotatingPoint: false, lockScalingX: true, lockScalingY: true });

Events

Events are part of the code that are executed only when a specified event occurs. Both fabric.Canvas and fabric.Object support events. Events are defined by adding a callback function to the on() method:

canvas.on('object:modified', function(options) { var x = options.target.left; var y = options.target.top; });

The code inside the callback function from above will be executed if an event called object:modified has occurred. The options.target variable represents the target object, i.e. in this example, that would be the object that has been modified. A full list of supported events can be found in the documentation.