Html fabricjs-一个画布上的多个剪裁方块

我在这个JSFIDLE中有以下代码，它有3个图像，每个图像都使用html5画布和fabricjs剪辑在它自己的正方形中：

但是如何才能阻止图像进入另一个剪辑区域/区域？我希望剪辑是特定于该图像的

下面的问题通过附带的JSFIDLE给出了答案，但是当缩放/旋转图像时，它会完全改变剪辑区域。加上剪辑区域与黑色的“区域”不匹配，我尝试调整代码，因为它接近我需要的，但没有成功

我怎样才能做到这一点？我的代码是：

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();

---

我知道已经很晚了，但我更新了“Fabric.js canvas上的多个剪辑区域”，发布它应该可以解决您的问题