Pfthb

I'm using the following method to mask a object using Fabric.js. When the object is flipped, this is not working, the mask is being placed where it would be if the object is not flipped. I have tried a lot of stuff, like flipping the mask itself, with no success.

Any ideas?

 let mask = new fabric.Path(path.path, 
 top: object.top,
 left: object.left,
 objectCaching: false,
 strokeWidth: 0,
 scaleX: 1 / object.scaleX,
 scaleY: 1 / object.scaleY,
 pathOffset: 
 x: 0,
 y: 0
 
 );

 object.clipMask = mask;

 object.originalObjectTop = object.top;
 object.originalObjectLeft = object.left;
 object.originalObjectWidth = object.width;
 object.originalObjectHeight = object.height;
 object.originalObjectScaleX = object.scaleX;
 object.originalObjectScaleY = object.scaleY;
 object.originalObjectAngle = object.angle;
 object.originalMaskScaleX = mask.scaleX;
 object.originalMaskScaleY = mask.scaleY;

 let transformedTranslate = object.translateToGivenOrigin(
 
 x: object.left,
 y: object.top
 ,
 object.originX,
 object.originY,
 "center",
 "center"
 );

 object.originalObjectTransformTop = transformedTranslate.y - object.getCenterPoint().y;
 object.originalObjectTransformLeft = transformedTranslate.x - object.getCenterPoint().x;

 object.set(
 clipTo: function(ctx) 
 ctx.save();
 ctx.rotate((-this.originalObjectAngle * Math.PI) / 180);
 ctx.translate(this.originalObjectTransformLeft / this.originalObjectScaleX, this.originalObjectTransformTop / this.originalObjectScaleY);

 this.clipMask.set(
 left: -this.originalObjectWidth / 2 - (this.clipMask.width / 2) * this.originalMaskScaleX - this.originalObjectLeft / this.originalObjectScaleX,
 top: -this.originalObjectHeight / 2 - (this.clipMask.height / 2) * this.originalMaskScaleY - this.originalObjectTop / this.originalObjectScaleY,
 objectCaching: false,
 fill: "rgba(0,0,0,0)"
 );

 this.clipMask.render(ctx);

 ctx.restore();
 
 );