title: get the X,Y coordinates of each objects to an array in fabric.js
body: <p>I have develop a small application using fabric js. In that application I'm drawing lins, Rectangle and circles on a canvas. And also there is a stamp section which can drag and drop a image to canvas. I want to get the X,Y coordinates of each object and also in stamp section i need to get the X,Y coordinates and width height of that image. I need to get these values to an array.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function initCanvas() {
    $('.canvas-container').each(function(index) {
  
      var canvasContainer = $(this)[0];
      var canvasObject = $("canvas", this)[0];
  
      var imageOffsetX, imageOffsetY;
  
      function handleDragStart(e) {
        [].forEach.call(images, function(img) {
          img.classList.remove('img_dragging');
        });
        this.classList.add('img_dragging');
        var imageOffset = $(this).offset();
        imageOffsetX = e.clientX - imageOffset.left;
        imageOffsetY = e.clientY - imageOffset.top;
      }
  
      function handleDragOver(e) {
        if (e.preventDefault) {
          e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'copy';
        return false;
      }
  
      function handleDragEnter(e) {
        this.classList.add('over');
      }
  
      function handleDragLeave(e) {
        this.classList.remove('over');
      }
  
      function handleDrop(e) {
        e = e || window.event;
        if (e.preventDefault) {
          e.preventDefault();
        }
        if (e.stopPropagation) {
          e.stopPropagation();
        }
        var img = document.querySelector('.furniture img.img_dragging');
        console.log('event: ', e);
  
        var offset = $(canvasObject).offset();
        var y = e.clientY - (offset.top + imageOffsetY);
        var x = e.clientX - (offset.left + imageOffsetX);
  
        var newImage = new fabric.Image(img, {
          width: img.width,
          height: img.height,
          left: x,
          top: y
        });
        canvas.add(newImage);
        return false;
      }
  
      function handleDragEnd(e) {
        [].forEach.call(images, function(img) {
          img.classList.remove('img_dragging');
        });
      }
  
      var images = document.querySelectorAll('.furniture img');
      [].forEach.call(images, function(img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
      });
      canvasContainer.addEventListener('dragenter', handleDragEnter, false);
      canvasContainer.addEventListener('dragover', handleDragOver, false);
      canvasContainer.addEventListener('dragleave', handleDragLeave, false);
      canvasContainer.addEventListener('drop', handleDrop, false);
    });
  }
  initCanvas();
  
  var canvas = new fabric.Canvas('canvas1', {
    selection: false
  });
  
  var line, isDown;
  
  function drawLine() {
    removeEvents();
    changeObjectSelection(false);
    canvas.on('mouse:down', function(o) {
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      var points = [pointer.x, pointer.y, pointer.x, pointer.y];
      line = new fabric.Line(points, {
        strokeWidth: 5,
        fill: '#07ff11a3',
        stroke: '#07ff11a3',
        originX: 'center',
        originY: 'center',
        selectable: false
      });
      canvas.add(line);
    });
    canvas.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      line.set({
        x2: pointer.x,
        y2: pointer.y
      });
      canvas.renderAll();
    });
  
    canvas.on('mouse:up', function(o) {
      isDown = false;
      line.setCoords();
    });
  }
  
  function drawrec() {
    var rect, isDown, origX, origY;
    removeEvents();
    changeObjectSelection(false);
  
    canvas.on('mouse:down', function(o) {
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      origX = pointer.x;
      origY = pointer.y;
      var pointer = canvas.getPointer(o.e);
      rect = new fabric.Rect({
        left: origX,
        top: origY,
        originX: 'left',
        originY: 'top',
        width: pointer.x - origX,
        height: pointer.y - origY,
        angle: 0,
        selectable:false,
        fill: '#07ff11a3',
        stroke: 'black',
        transparentCorners: false
      });
      canvas.add(rect);
    });
  
    canvas.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
  
      if (origX &gt; pointer.x) {
        rect.set({
          left: Math.abs(pointer.x)
        });
      }
      if (origY &gt; pointer.y) {
        rect.set({
          top: Math.abs(pointer.y)
        });
      }
  
      rect.set({
        width: Math.abs(origX - pointer.x)
      });
      rect.set({
        height: Math.abs(origY - pointer.y)
      });
  
  
      canvas.renderAll();
    });
    
    canvas.on('mouse:up', function(o) {
      isDown = false;
      rect.setCoords();
    });
  }
  
  function drawcle() {
    var circle, isDown, origX, origY;
    removeEvents();
    changeObjectSelection(false);
    canvas.on('mouse:down', function(o) {
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      origX = pointer.x;
      origY = pointer.y;
      circle = new fabric.Circle({
        left: pointer.x,
        top: pointer.y,
        radius: 1,
        strokeWidth: 1,
        fill: '#07ff11a3',
        stroke: 'black',
        selectable: false,
        originX: 'center',
        originY: 'center'
      });
      canvas.add(circle);
    });
  
    canvas.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      circle.set({
        radius: Math.abs(origX - pointer.x)
      });
      canvas.renderAll();
    });
  
    canvas.on('mouse:up', function(o) {
      isDown = false;
      circle.setCoords();
    });
  
  }
  
  function enableFreeDrawing(){
    removeEvents();
    canvas.isDrawingMode = true;
  }
  
  function enableSelection() {
    removeEvents();
    changeObjectSelection(true);
    canvas.selection = true;
  }
  
  function changeObjectSelection(value) {
    canvas.forEachObject(function (obj) {
      obj.selectable = value;
    });
    canvas.renderAll();
  }
  
  function removeEvents() {
    canvas.isDrawingMode = false;
    canvas.selection = false;
    canvas.off('mouse:down');
    canvas.off('mouse:up');
    canvas.off('mouse:move');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fullpage"&gt;
    &lt;div class="section"&gt;
    &lt;a class="thmb" href="#" onclick="drawLine()" style="padding: 0px 10px;margin:5px;border: 2px solid;"&gt;line&lt;/a&gt;
    &lt;a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;"&gt;Rectangle&lt;/a&gt;
    &lt;a class="thmb" href="#" onclick="drawcle()" style="padding: 0px 10px;margin:5px;border: 2px solid;"&gt;Circle&lt;/a&gt;
    &lt;a class="thmb" href="#" onclick="enableFreeDrawing()" style="padding: 0px 10px;margin:5px;border: 2px solid;"&gt;Drawing&lt;/a&gt;
    &lt;a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;"&gt;Selection&lt;/a&gt;
      &lt;div class="canvas-container"&gt;
        &lt;canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class="furniture" style="padding: 20px;border: 1px solid;width: 460px"&gt;
        &lt;h3&gt;Drag the image to canvas&lt;/h3&gt; 
        &lt;img draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'&gt;&lt;/script&gt;
  
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>