title: Issue with mirror image clone object position using fabric.js
body: <p>I am trying to make a clone object on the canvas using <code>fabric.js</code>, when I am make the clone of the original object it will place the clone accurately, but when I make a clone of the previous clone object it is not placing it accurately in all directions.</p>
  
  <p>Here is  <a href="http://jsfiddle.net/759FV/14/" rel="nofollow noreferrer">demo link</a></p>
  
  <p><strong>Html Code</strong></p>
  
  <pre><code> &lt;canvas  id="c" height="400" width="500"&gt;&lt;/canvas&gt;
   &lt;button id="clone_left" name="left"&gt;Left&lt;/button&gt;
   &lt;button id="clone_right" name="right"&gt;right&lt;/button&gt;
   &lt;button id="clone_top" name="top"&gt;top&lt;/button&gt;
   &lt;button id="clone_bottom" name="bottom"&gt;bottom&lt;/button&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>//Using i-text
  var canvas = new fabric.Canvas('c');
  var text = new fabric.IText('Sample', {
      left: 100,
      top: 100,
      fill: 'red'
  });
  canvas.add(text); 
  document.getElementById('clone_left').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if(obj.type=='i-text')
    {
          if (fabric.util.getKlass(obj.type).async) {
              obj.clone(function (clone) {
                 clone.set({left: clone.get('left') + 210});
                  canvas.add(clone);
              });
          } else {
              //alert("else");
              var clone = obj.clone();
            //lone.set({left: clone.get('left') + 370});
            clone.set("angle", "180").set('flipY', true); 
            clone.set({top: clone.get('top') + 52});
            canvas.add(clone);
            canvas.renderAll();
          }
    } 
  });
  
  document.getElementById('clone_right').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if(obj.type=='i-text')
    {
          if (fabric.util.getKlass(obj.type).async) {
              obj.clone(function (clone) {
                 clone.set({left: clone.get('left') + 210});
                 clone.set("angle", "180").set('flipY', true);
                 canvas.add(clone);
                 //alert("if");
              });
          } else {
            //  alert("else right");
            var clone = obj.clone();
            clone.set({left: clone.get('left') + 250});
            clone.set("angle", "180").set('flipY', true); 
            clone.set({top: clone.get('top') + 52});
            canvas.add(clone);
          } 
       } 
  });
  document.getElementById('clone_top').addEventListener('click', function (e) {
   var obj = canvas.getActiveObject();
    if(obj.type=='i-text')
    {
          if (fabric.util.getKlass(obj.type).async) {
              obj.clone(function (clone) {
                clone.set("angle", "180").set('flipX', true);
                clone.set({top: clone.get('top') - 135});
                canvas.add(clone);
              });
          } else {
              //alert("else top");
              var clone = obj.clone();
          //clone.set("angle", "180").set('flipX', true);     
         // clone.set({top: clone.get('top') - 50});
            clone.set({left: clone.get('left') + 120});
            clone.set("angle", "180").set('flipX', true); 
            canvas.add(clone);
          } 
    }  
  });
  
  document.getElementById('clone_bottom').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();
    if(obj.type=='i-text')
    {
          if (fabric.util.getKlass(obj.type).async) {
              obj.clone(function (clone) {
                clone.set("angle", "-180").set('flipX', true);    
                clone.set({top: clone.get('top') + 135});
                canvas.add(clone);
              });
          } else {
              var clone = obj.clone();
          // clone.set("angle", "-180").set('flipX', true);   
          //clone.set({top: clone.get('top') + 50});
          clone.set("angle", "-180").set('flipX', true);  
          clone.set({top: clone.get('top') + 100});
          clone.set({left: clone.get('left') + 120});
          canvas.add(clone);
          } 
    } 
  
  });
  </code></pre>
  
  <p>When i am make the simple clone it works good: 
  <img src="https://i.stack.imgur.com/E0A51.png" alt="working snap"></p>
  
  <p>But when I make a clone of the cloned object it looks like this and is not in the accurate position.You can see here the clone object made from the bottom of the clone with the blue border corner and the blue arrow representing the wrong position of that object, actually I want that cloned object below as it is of the cloned object.  </p>
  
  <p><img src="https://i.stack.imgur.com/t09Xa.png" alt="Getting issue with position"></p>