title: Identify when user clicks on an object on the canvas
body: <p>I am creating an application where when the <code>user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click</code>. I have successfully achieved this but the issue I am having is every time I try to adjust or drag the already added rectangles on the canvas it creates new objects.</p>
  
  <p>I would be really grateful if you experts would provide any code snippets/ references so that I could achieve this. :) thank you below is my code snippet.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="button" value="addrect" onclick="addrect()"&gt;
  &lt;input type="button" value="undo" onclick="undo()"&gt;
  &lt;input type="button" value="redo" onclick="redo()"&gt;
  &lt;input type="button" value="clear" onclick="clearcan()"&gt;
  &lt;br/&gt;
  &lt;canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>/*
  undo redo commandhistory with canvas
  */
  
  var canvas = new fabric.Canvas('fabriccanvas');
  canvas.counter = 0;
  var newleft = 0;
  canvas.selection = false;
  
  canvas.on('mouse:up', function (e) {
      addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
  });
  
  addrect = function addrect(top, left, width, height, fill) {
      canvas.add(new fabric.Rect({
          top: top,
          name: 'rectangle ' + window.counter,
          left: left,
          width: 100,
          height: 100,
          fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
          //fix attributes applied for all rects
          opacity: 0.75,
          lockRotation: true,
          originX: 2,
          originY: 10,
          cornerSize: 15,
          hasRotatingPoint: false,
          perPixelTargetFind: true,
          minScaleLimit: 1
      }));
  
      updateModifications(true);
      canvas.counter++;
      newleft += 100;
  }
  var state = [];
  var mods = 0;
  canvas.on(
      'object:modified', function () {
      updateModifications(true);
  },
      'object:added', function () {
      updateModifications(true);
  });
  
  function updateModifications(savehistory) {
      if (savehistory === true) {
          myjson = JSON.stringify(canvas);
          state.push(myjson);
      }
  }
  
  undo = function undo() {
      if (mods &lt; state.length) {
          canvas.clear().renderAll();
          canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
          canvas.renderAll();
          //console.log("geladen " + (state.length-1-mods-1));
          //console.log("state " + state.length);
          mods += 1;
          //console.log("mods " + mods);
      }
  }
  
  redo = function redo() {
      if (mods &gt; 0) {
          canvas.clear().renderAll();
          canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
          canvas.renderAll();
          //console.log("geladen " + (state.length-1-mods+1));
          mods -= 1;
          //console.log("state " + state.length);
          //console.log("mods " + mods);
      }
  }
  
  clearcan = function clearcan() {
      canvas.clear().renderAll();
      newleft = 0;
  }
  </code></pre>
  
  <p>I tried many ways to solve this but could not complete and I would be really grateful if you experts could provide me with a solution :) thanks</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I know that the issue is because I am capturing the mouse click event to create the object and the same event applies when an existing object is dragged thus creating a new object on the canvas. I would appreciate any suggestions on how to overcome this issue :)</p>