Fabric.js object:selected, object not selected

Question

Using Fabric.js I am working with a text object that I have named header. When the header area is selected a div is faded in with two input fields that can be used to set text and fill. This is working for me.

What I am attempting to handle next, is when deselecting the header object, I will fade out my div. What is the proper way to handle header.off()?

header.on('selected', function() {

  $('#header-text-edit').fadeIn('fast');

  // watch for header.input changes
  scope.$watch("header.input", function(value) {
    header.text = scope.header.input;
  });

  // watch for header.color changes
  scope.$watch("header.color", function(value) {
    header.fill = scope.header.color;
  });
});

Answer 1

You need:

canvas.on('selection:cleared', function() {
  ...
});

Take a look at Events Demo and Events Section in tutorial.

Answer 2

For fabricjs 2.0 branch the events for selection on canvas should be as follows:

canvas.on('selection:created', function () {
   //...
});

canvas.on('selection:cleared', function () {
   //...
});

the selected event is for individual objects on canvas

var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {
    console.log('selected a rectangle');
});