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 object's properties?

Using fabric.Object#set method or one of the set* methods — setFill, setWidth, setHeight, setOpacity, etc.

rect.set('width', 100).set('height', 50);
// or
rect.set({ width: 100, height: 50 });
// or
rect.setFill('red');
rect.setOpacity(0.5);

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 canvas area?

Using "clipTo" property of fabric.Element instance:

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;