аюсь реализовать маску изображения, как пример ниже:

Пример изображения здесь:https://s3-ap-northeast-1.amazonaws.com/utonly/demo/demo.jpg

Я пробовал так много способов и занял много времени, но все еще не могу найти хорошее решение для этого. Изображение должно иметь возможность изменять размеры и вращаться внутри маски или редактировать из другого вида, а затем применять результат обратно к изображению.

Я нашел подобный пример здесьhttp://jsfiddle.net/tbqrn/68/ Но я не хочу, чтобы изображения проходили сквозь друг друга. Это возможно? Или у меня есть шанс попробовать другие способы сделать это?

var img01URL = 'http://fabricjs.com/assets/printio.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';

var canvas = new fabric.Canvas('c');

var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(10,10,150,150);
    ctx.rect(170,10,200,200);
    ctx.rect(10,170,150,150);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();

fabric.Image.fromURL(img01URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 10;
    oImg.top = 10;
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.40);
    oImg.left = 180;
    oImg.top = 0;
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img03URL, function(oImg) {
    oImg.left = 10;
    oImg.top = 170;
    canvas.add(oImg);
    canvas.renderAll();
});

Спасибо за помощь.