title: Crop multiple images on same canvas using FabricJs
body: <p>I want to add images to the canvas and select one at a time and apply crop to   please have a look:
  <a href="http://jsfiddle.net/kNEaX/586/" rel="nofollow noreferrer">http://jsfiddle.net/kNEaX/586/</a></p>
  
  <p>original post: <a href="https://stackoverflow.com/questions/18732876/crop-functionality-using-fabricjs">Crop Functionality using FabricJs</a></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>var canvas = new fabric.Canvas('c1');
  canvas.backgroundColor = "#333";
  canvas.renderAll();
  
  var mouseDown;
  var r = document.getElementById('c1').getBoundingClientRect();
  var src = "http://fabricjs.com/lib/pug.jpg";
  var disabled = true;
  var scaleX, scaleY
  var el
  
  
  fabric.util.loadImage(src, function(img) {
    object = new fabric.Image(img);
    object.set({
      //      left: 200,
      //      top: 200,
      selectable: true
    });
    object.hasRotatingPoint = true;
    //    object.scaleX = object.scaleY = 0.25;
    canvas.add(object);
    canvas.renderAll();
  });
  
  
  
  
  canvas.on("mouse:down", function(event) {
    if (!disabled) {
      el.width = 2;
      el.height = 2;
      el.left = event.e.pageX - r.left;
      el.top = event.e.pageY - r.top;
      el.visible = true;
      mouseDown = event.e;
      canvas.bringToFront(el);
      canvas.renderAll();
    }
  });
  
  canvas.on("mouse:move", function(event) {
  
    if (mouseDown &amp;&amp; !disabled) {
      el.width = event.e.pageX - mouseDown.pageX;
      el.height = event.e.pageY - mouseDown.pageY;
      canvas.renderAll();
    }
  });
  
  
  canvas.on("mouse:up", function(event) {
    mouseDown = null;
    if (disabled === false) {
      cropB()
    }
  });
  
  $('#cropB-start').on('click', function(event) {
  
    var obj = canvas.getActiveObject();
    if (obj) {
      disabled = false;
  
      el = new fabric.Rect({
        fill: 'transparent',
        stroke: '#ccc',
        strokeDashArray: [2, 2],
        visible: false
      });
  
      el.visible = false;
      canvas.add(el);
      canvas.renderAll();
  
  
      obj.set({
        selectable: false
      })
      canvas.renderAll();
    }else{
    alert('Please select the photo and then click Start Crop, to reset crop click the Reset button')
    }
  
  });
  
  $('#cropB-reset').on('click', function(event) {
  
    var obj = canvas.getActiveObject();
  
    obj.clipTo = null;
    canvas.renderAll();
  
  });
  
  function cropB() {
    var image = canvas.getActiveObject();
  
    if (image) {
      scaleX = image.get('scaleX'),
        scaleY = image.get('scaleY')
  
      image.clipTo = function(ctx) {
        // origin is the center of the image
        var x = el.left - image.getWidth() / 2
        var y = el.top - image.getHeight() / 2
        ctx.rect(x, y, el.width * scaleX, el.height * scaleY);
      };
      image.selectable = true;
      disabled = true;
      el.visible = false;
      canvas.renderAll();
    }
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas style="-moz-user-select: none; cursor: crosshair;" width="400" height="400" id="c1"&gt;&lt;/canvas&gt;
  &lt;button id=cropB-start&gt;Start Crop&lt;/button&gt;
  &lt;button id=cropB-reset&gt;Reset&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that if I add scale to the photo or move the photo, then apply the crop, it does not show the correct crop.</p>
  
  <p>please have a look at the fiddle and see what you can do.</p>