The Event System of FabricJS

FabricJS provides an extensive list of events. Starting from its low-level mouse events, it’s got us fully covered.

Starting with this article, I will explain how we can work with events using FabricJS. It’s going to be in parts so hang tight and let’s begin!

What is an Event in Canvas?

An event is an occurrence that tells us that something has changed in our system. It depends on us how we react to it. Events can happen anywhere. Similar to how events occur in webpages, Canvas events are no different.

So, when we click on the canvas, it is an event.

When we rotate something on the canvas, it is also an event.

When we drag something into the canvas, oh yeah you got that, it is also an E-V-E-N-T.

It’s not that complicated, right? ~(￣▽￣)~*

Using the on() method

Since the Event API is similar to jQuery, Underscore.js and other javascript libraries, you might be able to find some similarities.

However, if you are completely unaware of jQuery or Underscore.js or if you’ve forgotten them, it’s okay we can still make it work!

The on() method simply attaches the event to any selected element. In this case, instances.

Adding mouse events onto the canvas

As an example, I have used the mouse:up and mouse:down events and attached them to the canvas instance by using the on() method.

The mouse:up event is fired whenever the mouse button is released. On the contrary, the mouse:down event occurs whenever the mouse button is pressed.

Here, I have created an instance of fabric.Canvas and by using the backgroundColor property , I have set the background color as black. However, I want its background color to change to white when a mouse up event occurs and, red when a mouse down event occurs. In order to handle those events, I have used the on() method to initialize event listener. Further the handler, changes the background color and logs an output for us in the console.

     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      canvas.on("mouse:up", () => {
        console.log("mouse up event");
        canvas.setBackgroundColor("white", canvas.renderAll.bind(canvas));
      });

      canvas.on("mouse:down", () => {
        console.log("mouse down event");
        canvas.setBackgroundColor("red", canvas.renderAll.bind(canvas));
      });

Logged output in the console

mouse:down: set background color to red; mouse:up: set background color to white

Canvas events that react to User selection

Whenever a user interacts with objects in the canvas, user selection events can be activated. The following are the events that are fired by the canvas on user selection:

1. selection:created — When the user advances from no selection to selecting something, this event is fired.
2. selection:updated — Multiselection, switching from single to multiselection or moving the selection from object A to B fires this event.
3. before:selection:cleared —This event is fired just before the selection:cleared event.
4. selection:cleared — This event is fired when a user deselects an object or destroys a multiple selection.

Here’s a code example to demonstrate that:

     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      var rect = new fabric.Rect({
        width: 60,
        height: 80,
        top: 30,
        left: 120,
        fill: "white",
        stroke: "#ffdead",
      });

      var square = new fabric.Rect({
        width: 90,
        height: 90,
        top: 80,
        angle: 14,
        left: 300,
        fill: "#43b3ae",
        stroke: "white",
      });

      canvas.add(rect, square);

      canvas.on("selection:created", (obj) => {
        var selectedObj = obj.target;
        console.log("An object has been selected");
      });

      canvas.on("selection:updated", (obj) => {
        console.log("You have selected the other object");
      });