Tutorial

• How to set up fabric.js

• Objects

  • Creating objects
  • Modifying objects
  • Chaining methods

• Canvas

  • Creating canvas
  • Adding objects
  • Removing objects
  • Changing objects z-index
  • Changing canvas background
  • Clipping canvas
  • Chaining
  • Recalculating offset

• Animation

• Events

• Working with color

• Object groups

• Text

• Free drawing

• Serialization

• Preventing object modification

Objects

Creating objects

You can create all kinds of shapes with fabric — simple ones like circle, rectangle, triangle, as well as complex ones like paths and path groups. Creating objects is very simple. Let's take a look at how to create a rectangle:

var myRect = new fabric.Rect({ width: 100, height: 100 });

And what about circle?

var myCircle = new fabric.Circle({ radius: 50 });

It's important to understand that when object is created in such way, it doesn't yet render on canvas. It only exists in memory. In order to render it on canvas, you need to add it to that particular canvas, using canvas' add method:

myCanvas.add(myCircle);

Object options

Note how we specified "width" and "height" of rectangle, and "radius" of circle. These properties are all part of the initial options that can be passed to an object initializer. Let's try creating a circle but this time with few more options passed in:

var myCircle = new fabric.Circle({ 
  radius: 10, 
  fill: 'red', 
  stroke: 'blue'
});

Notice how we specified "fill" and "stroke" values of a circle. This will make circle entirely red, with a blue outline. We could have also specified other options, such as "left", "top", "angle", "opacity", and many others:

var myCircle = new fabric.Circle({
  radius: 10,
  left: 100,
  top: 200,
  opacity: 0.5
});

Modifying objects

Once you create an object, you can modify its properties. Let's create a rectangle again, then try to change some of its properties:

var rect = new fabric.Rect({ width: 100, height: 50 });
rect.getWidth(); // 100

rect.setWidth(200);
rect.getWidth(); // 200

Notice how we created rectangle with width of 100, then changed it to 200. You can change almost any property of an object in such way, even after it's created:

var circle = new fabric.Circle({ radius: 20 });
circle.set('radius', 30); // radius is now changed from 20 to 30

When you need to change multiple properties at the same time, you can pass an object to set method, instead of calling it again and again:

var circle = new fabric.Circle({ radius: 20, fill: 'red' });
circle.set({
  fill:     'green',  // change fill color to green
  opacity:  0.5,      // make it half transparent
  left:     100,      // position it at 100 pixels from the left edge
  top:      100       // ... and 100 pixels from the top edge
});

Chaining object methods

For convenience, most of the object methods can be chained. For example, let's say we want to change both — opacity and coordinates of a circle object. One way to do this would be like so:

myCircle.setLeft(100);
myCircle.setTop(200);
myCircle.setOpacity(0.25);

Another way — as we've seen in the previous section — is to pass an object to set method:

myCircle.set({ 
  left: 100, 
  top: 200, 
  opacity: 0.25 
});

Finally, we can always take advantage of method chaining:

myCircle
  .setLeft(100)
  .setTop(200)
  .setOpacity(0.25);

Canvas

Creating canvas

Everything in fabric is rendered in context of a certain canvas. Each canvas instance corresponds to one canvas element. Initializing canvas is as simple as creating objects. The only thing that has to be passed to fabric.Canvas constructor is id of a canvas element that exists in a document.

<canvas id="my-canvas"></canvas>
...
var myCanvas = new fabric.Canvas('my-canvas');

Similar to object initialization, fabric.Canvas constructor can accept options object as a second argument. For example, we can specify canvas background to be black, and turn off ability to select objects ("selection" option):

var myCanvas = new fabric.Canvas('my-canvas', {
  backgroundColor: 'black',
  selection: false
});

Adding objects

Once we created a canvas, it's time to finally draw something on it. You already know how to create an object, and how to create a canvas. The only missing link is adding created object onto canvas. Let's see how this is done:

var myRect = new fabric.Rect({ width: 100, height: 50, fill: 'red' });
var canvas = new fabric.Canvas('my-canvas');

canvas.add(myRect);
canvas.renderAll();

What's going on here? Well, let's see. First we create a rectangle object — myRect. Then we initialize canvas — myCanvas. Then we add rectangle to this newly initialized canvas, and finally call renderAll method.

What's the purpose of renderAll method?

You see, while canvas.add does add object to canvas, it does it quietly, without rendering anything on the screen. The object is considered part of canvas, it can be modified, or even removed. But it doesn't render until we call canvas' renderAll method.

This means that we can add few objects to canvas, and then render everything in one go:

canvas.add(new fabric.Rect({ width: 10, height: 10, fill: 'red' }));
canvas.add(new fabric.Circle({ radius: 20, fill: 'blue' }));
canvas.add(new fabric.Rectangle({ width: 20, height: 20, fill: 'green' }));

canvas.renderAll(); // only at this point all objects are rendered on canvas