title: Multiple clipping areas on Fabric.js canvas
body: <p>For making <a href="https://editphotosforfree.com" rel="nofollow noreferrer">Photo Collage Maker</a>, I use fabric js which has an object-based clipping feature. This feature is great but the image inside that clipping region cannot be scaled, moved or rotated. I want a fixed position clipping region and the image can be positioned inside the fixed clipping area as the user want. </p>
  
  <p>I googled and find very near solution.</p>
  
  <pre><code>var canvas = new fabric.Canvas('c');
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(10,10,150,150);
  ctx.rect(180,10,200,200);
  ctx.closePath();
  ctx.stroke();
  ctx.clip();
  </code></pre>
  
  <p><a href="https://jsfiddle.net/tbqrn/" rel="nofollow noreferrer">Multiple Clipping Areas on fabric js canvas</a> </p>
  
  <p>where the image of one clipping region has appeared in another clipping region. How can I avoid this or is there another way of accomplishing this using fabric js.</p>