Multiple clipping areas on Fabric.js canvas

Question

For making Photo Collage Maker, 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,

Answer 1

With the latest update on fabric 1.6.0-rc.1, you are able to skew the image by hold shift and drag the middle axis.

I have trouble with how to reverse the skew so that the clipping area stays the same. I have tried the following code to try to reverse it back, but didn't work.

var skewXReverse = - this.skewX;
var skewYReverse = - this.skewY;

ctx.translate( ctxLeft, ctxTop );
ctx.scale(scaleXTo1, scaleYTo1);
ctx.transform(1, skewXReverse, skewYReverse, 1, 0, 0);
ctx.rotate(degToRad(this.angle * -1));

Demo: https://jsfiddle.net/uimos/bntepzLL/5/