title: Clipping mask using fabricjs
body: <p>I'm currently working on web app for photo editing using FabricJS and one of features I need to implement is something like Clipping masks from Photoshop.</p>
  
  <p>For example I have <a href="http://imgur.com/a/wRxm6" rel="nofollow">this assets</a>: frame, mask and image. I need to insert image inside frame and clip it with mask. Most tricky part is in requirements:</p>
  
  <ol>
  <li>User should be able to modify image inside frame, e.g. move, rotate, skew... Frame itself also can be moved inside canvas.</li>
  <li>Number of layers is not limited so user can add objects under or above masked image.</li>
  <li>Masks, frames and images is not predefined, user should be able to upload and use new assets.</li>
  </ol>
  
  <p>My current solution is this:</p>
  
  <ol>
  <li>Load assets</li>
  <li>Set <code>globalCompositeOperation</code> of image to <code>source-out</code></li>
  <li>Set <code>clipTo</code> function for image. </li>
  <li>Add assets on canvas as a group</li>
  </ol>
  
  <p>In this solution <code>clipTo</code> function preserve image inside rectangular area of frame and with help of <code>globalCompositeOperation</code> I'm clipping image to actual mask. At first sight it works fine but if I add new layer above this newly added group it will be cutted off because of <code>globalCompositeOperation="source-out"</code> rule. I've created <a href="https://jsfiddle.net/m4t9t3gc/9/" rel="nofollow">JSFiddle</a> to show this.</p>
  
  <p>So, that else could I try? I've seen some posts on StackOverflow with advices to use SVGs for clipping mask, but if I understand it correctly SVG must contain only one path. This could be a problem because of third requirement of my app.</p>
  
  <p>Any advice in right direction will help, because right now I'm totally stuck with this problem. </p>