title: Proper way to approach loadable masks in Fabric.js
body: <p>I have this bounty open <a href="https://stackoverflow.com/questions/52745514/fabricjs-mask-object-with-transformation">Fabricjs mask object with transformation</a> when trying to mask objects with <code>Fabric.js</code>.</p>
  
  <p>The tool I'm developing should allow users to draw a mask over image objects, and apply transformations (skew scale rotate etc) to this object before or after the mask. I'm close to obtaining this result but objects with an angle are still not working.</p>
  
  <p>I'm also trying to save this object to a database using <code>toJSON</code> and <code>loadFromJSON</code>, but after a few days trying to accomplish this I realize that this solution will not work because any references outside the <code>ctx</code> scope can't be accessed while loading from JSON, so they throw an error.</p>
  
  <pre><code>    clipTo: function(ctx) {
          mask.set({
              left:
                  -object.width / 2 -
                  (mask.width / 2) * originalMaskScaleX -
                  originalObjLeft / originalObjScaleX,
              top:
                  -object.height / 2 -
                  (mask.height / 2) * originalMaskScaleY -
                  originalObjTop / originalObjScaleY,
              objectCaching: false
          });
          mask.render(ctx);
      }
  </code></pre>
  
  <p>Is <code>Fabric.js</code> the proper solution to this problem? Should I be using something else? If this can be done with <code>Fabric.js</code>, what is the proper approach?</p>