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?

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

How can I remove objects from canvas?

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

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);