fabric.js/site/posts/demos/_posts/2011-9-1-hovering.html

---
layout: demo
title: Hovering
---

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

<script id="main">var canvas = new fabric.Canvas('c');

// piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events

canvas.findTarget = (function(originalFn) {
  return function() {
    var target = originalFn.apply(this, arguments);
    if (target) {
      if (this._hoveredTarget !== target) {
        canvas.fire('object:over', { target: target });
        if (this._hoveredTarget) {
          canvas.fire('object:out', { target: this._hoveredTarget });
        }
        this._hoveredTarget = target;
      }
    }
    else if (this._hoveredTarget) {
      canvas.fire('object:out', { target: this._hoveredTarget });
      this._hoveredTarget = null;
    }
    return target;
  };
})(canvas.findTarget);

// now we can observe "object:over" and "object:out" events
// in this example, object is set to red color on hover over and green color on hover out

canvas.observe('object:over', function(e) {
  e.memo.target.setFill('red');
  canvas.renderAll();
});

canvas.observe('object:out', function(e) {
  e.memo.target.setFill('green');
  canvas.renderAll();
});

// add random objects
for (var i = 15; i--; ) {
  var dim = fabric.util.getRandomInt(30, 60);
  var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0,2)];
  var options = { 
    top: fabric.util.getRandomInt(0, 600),
    left: fabric.util.getRandomInt(0, 600),
    fill: 'green'
  };
  if (klass === 'Circle') {
    options.radius = dim;
  }
  else {
    options.width = dim;
    options.height = dim;
  }
  canvas.add(new fabric[klass](options));
}
</script>