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

---
layout: demo
title: Event inspector
---

<style>
  p { margin-top: 3px; margin-bottom: 3px; }
  #log1, #log2 { display: inline-block; width: 200px; height: 500px; overflow-y: auto; font-family: monospace; font-size: 11px; }
</style>

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>

<div id="observing-events-log" style="position:absolute;top:110px;left:450px;">
  <strong style="margin-bottom:10px;display:block">Observing these events:</strong>
</div>

<div>
  <div id="log1">&nbsp;</div>
  <div id="log2">&nbsp;</div>
</div>

<script>
  var canvas1 = new fabric.Canvas('c1');
  canvas1.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
  canvas1.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));

  var canvas2 = new fabric.Canvas('c2');
  canvas2.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
  canvas2.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));

  var log1 = document.getElementById('log1');
  var log2 = document.getElementById('log2');

  function log(message, where) { 
    var el = document.createElement('p'); 
    el.appendChild(document.createTextNode(message));
    var containerEl = (where === 1 ? log1 : log2);
    containerEl.insertBefore(el, containerEl.firstChild);
  }
  function logObservingEvent(eventName) {
    var el = document.getElementById('observing-events-log');
    var para = document.createElement('p');
    para.appendChild(document.createTextNode(eventName));
    el.appendChild(para);
  }

  function observe(eventName) {
    logObservingEvent(eventName);
    canvas1.observe(eventName, function(){ log(eventName, 1) });
    canvas2.observe(eventName, function(){ log(eventName, 2) });
  }

  observe('object:modified');
  observe('object:moving');
  observe('object:selected');
  
  observe('before:selection:cleared');
  observe('selection:cleared');
  observe('selection:created');
  
  // observe('after:render');
  observe('mouse:up');
  observe('mouse:down');

</script>