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

Update to @Promlnc answer.

You need to replace the order of context transformations in order to perform proper clipping.

1. translation
2. scaling
3. rotation

Otherwise, you will get wrongly clipped object - when you scale without keeping aspect ratio (changing only one dimension).

Code (69-72):

ctx.translate( ctxLeft, ctxTop );

ctx.rotate(degToRad(this.angle * -1));
ctx.scale(scaleXTo1, scaleYTo1);

Replace to:

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

See this: https://jsfiddle.net/ZxYCP/185/

Proper result:

UPDATE 1:

I have developed a feature to clip by polygon: https://jsfiddle.net/ZxYCP/198/