title: FabricJS prevent canvas.clipTo from clipping canvas.backgroundImage
body: <p>I want to set a global <code>clipTo</code> in my Fabric-powered Canvas that will affect all user-added layers. I want a background image and an overlay image, which are unaffected by this clip mask.</p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/FQY6v.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FQY6v.png" alt="enter image description here"></a></p>
  
  <p>Here's what's happening in this photo: </p>
  
  <ol>
  <li>A canvas overlay image makes the t-shirt look naturally wrinkled. This overlay image is mostly transparent</li>
  <li>A background image in the exact shape of the t-shirt was added, which is supposed to make the t-shirt look blue</li>
  <li>A <code>canvas.clipTo</code> function was added, which clips the canvas to a rectangular shape</li>
  <li>A user-added image (the famous Fabric pug) was added</li>
  </ol>
  
  <p>I want the user-added image (the pug) to be limited to the rectangular area.</p>
  
  <p>I do <strong>not</strong> want the background image (the blue t-shirt shape) affected by the clip area.</p>
  
  <p>Is there a simple way to accomplish this? I really don't want to have to add a <code>clipTo</code> on every single user layer rather than one tidy global <code>clipTo</code>.</p>
  
  <p>You can play with a JS fiddle showing the problem <a href="https://jsfiddle.net/dp4aa1z9/" rel="noreferrer">here</a>.</p>