FAQ

How can I reference existing objects on canvas?

canvas.getObjects() returns an array of all objects on canvas.
canvas.item(n) returns n-th object on canvas (where indexing is associated with z-order)

canvas.getObjects(); // [...]
canvas.item(0); // first item
canvas.item(1); // second item

How can I change the order of objects on the canvas?

By default, selecting an object on your canvas will bring it to the front. This can be changed by setting canvas.preserveObjectStacking = true;

The order of objects on your canvas is determined by that object's position in your canvas's object array (there is currently no z-index support for overriding an object's display order). An object's position within the stack can be changed using the following methods:

obj.bringToFront(); // brings the object to the top of the stacking order
obj.bringForward(); // brings the object up in the stacking order
obj.sendToBack(); // sends the object to the bottom of the stacking order
obj.sendBackwards(); // sends the object down in the stacking order
obj.moveTo(n); // sends the object to a specific index in the stacking order

How can I change an object's properties?

An object's properties can be changed using the fabric.Object#set method.

// properties can be set individually
obj.set('width', 100);
// or passed as an object with several properties
obj.set({ width: 100, height: 50, fill: 'red' });

After changing any property that affects the position of the object's controls, be sure to call obj.setCoords() to recalculate that object's bounding rectangle. See When to call setCoords for more info.

How can I change background color of canvas area?

Using "backgroundColor" property of fabric.Element instance.

canvas.backgroundColor = 'red';
// or
canvas.backgroundColor = rgba(0, 255, 0, 0.5);

How can I clip the canvas area?

As of version 2.4.0, clipping is performed using the new clipPath property, which is covered in-depth in the 4-part ClipPath Guide. For versions prior to 2.4.0, the clipTo property can be used as follows:

canvas.clipTo = function(ctx) {
  ctx.arc(0, 0, 60, 0, Math.PI*2, true);
};
// or passing to fabric.Element options
new fabric.Element('myCanvas', {
  clipTo: function(ctx) {
    ctx.arc(0, 0, 60, 0, Math.PI*2, true);
  }
});

How can I remove objects from canvas?

You can remove all objects on canvas using "shortcut" method clear() of fabric.Element instance:

canvas.clear(); // removes all objects and redraws a canvas area

You can remove individual objects using remove() method of fabric.Element instance. Note that remove accepts a reference to an object in question.

canvas.remove(myRect);

How can I remove group from canvas?

To remove a group, walk through each object in a group and manually remove it from canvas.

if (canvas.getActiveGroup()) {
  canvas.getActiveGroup().forEachObject(function(a) {
    canvas.remove(a);
  });
  canvas.discardActiveGroup();
}

My text is not displayed. What could be the problem?

It's likely that font file was not included. See wiki article on how to render text.

How do I disable global canvas selection?

By changing canvas selection property:

canvas.selection = false;

How can I increase the selectable (clickable) area of an object?

Increase the padding property, which in turn enlarges the bounding box:

circle.set('padding', 10);