FabricJS clipping mask
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
JavaScript
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://i.imgur.com/X2TgPLl.png', function (image) {
var mask = image.scale(0.5, 0.5).set({name: 'mask'});
fabric.Image.fromURL('http://i.imgur.com/7k5FKjl.png', function (image) {
var frame = image.scale(0.5, 0.5).set({name: 'frame'});
fabric.Image.fromURL('http://i.imgur.com/ovSntnd.jpg', function (image) {
var img = image.scale(0.5, 0.5).set({
name: 'img',
globalCompositeOperation: 'source-out'
});
img.clipTo = function(ctx) {
return _.bind(clip, img, ctx, frame)(ctx)
};
fabric.Image.fromURL('http://i.imgur.com/ovSntnd.jpg', function (image) {
var img2 = image.scale(0.5, 0.5).set({left: 120, top: 120});
canvas.add(img2);
img2.sendToBack();
});
canvas.add(new fabric.Group([mask, img, frame], {name: 'group'}));
/*canvas.add(mask);
canvas.add(img);
canvas.add(frame);*/
});
});
});
// Since the `angle` property of the Image object is stored
// in degrees, we'll use this to convert it to radians.
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
var clip = function (ctx, clipObj) {
this.setCoords();
var scaleXTo1 = (1 / this.scaleX);
var scaleYTo1 = (1 / this.scaleY);
ctx.save();
var ctxLeft = -( this.width / 2 ) + clipObj.strokeWidth;
var ctxTop = -( this.height / 2 ) + clipObj.strokeWidth;
var ctxWidth = clipObj.width - clipObj.strokeWidth;
var ctxHeight = clipObj.height - clipObj.strokeWidth;
ctx.translate(ctxLeft, ctxTop);
ctx.scale(scaleXTo1, scaleYTo1);
ctx.rotate(degToRad(this.angle * -1));
ctx.beginPath();
ctx.rect(clipObj.left - this.oCoords.tl.x, clipObj.top...