Select/Mouseover

by InferOn

HTML

<canvas id="c" width="500" height="500"></canvas>

JavaScript

var canvas  = new fabric.Canvas('c');

/*_____________Adding shapes_______________*/

var pol = new fabric.Polygon([
  {x: 100, y: 0},
  {x: 150, y: 50},
  {x: 150, y: 100},
  {x: 50, y: 100},
  {x: 50, y: 50} ], {
    left: 50,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 300, y: 50},
  {x: 300, y: 100},
  {x: 200, y: 100},
  {x: 200, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

/*_____________Event Handling_______________*/

canvas.on('object:selected', function(event) {
	 changeSelectedObjectColorOpacity(event.target);
});
canvas.on('mouse:over', function(event) {
	 changeSelectedObjectColorOpacity(event.target);
});
canvas.on('mouse:out', function(event) {
	 revertObjectColorOpacity(event.target);
});
canvas.on('selection:cleared', function(event) {
	 revertObjectColorOpacity(event.target);
});

/*_________Change Color function_____________*/

var selected_fill_color     = 'grey';
var selected_object_opacity = 0.5;

function changeSelectedObjectColorOpacity(object) {
	if (object == null) { return;}
  original_fill_color = object.fill;
  original_opacity    = object.opacity;
 
object.set({fill: selected_fill_color, opacity: selected_object_opacity});
canvas.renderAll();
}

function revertObjectColorOpacity(object) {
	if (object == null) { return;}
	object.set({fill: original_fill_color, opacity: original_opacity});
  canvas.renderAll();
}