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 all objects from canvas?

Using "shortcut" method clear() of fabric.Element instance:

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