leesei edited this page Apr 6, 2016 · 25 revisions

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.

// changing dimension
rect.set('width', 100).set('height', 50);
// or
rect.set({ width: 100, height: 50 });
// update the bounding rect after changing dimension

// other properties

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.


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

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);
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.