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

Question

我在这个jsfiddle中有以下代码，它有3个图像，每个图像都使用html5 canvas和fabricjs在其自己的方块中剪切：

http://jsfiddle.net/tbqrn/68/

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

以下问题给出了附带jsfiddle的答案，但在缩放/旋转图像时，它完全改变了裁剪区域。此外，剪裁区域与黑色区域不匹配＆＃39;我已经尝试调整代码，因为它接近我需要的但没有成功。

Multiple clipping areas on Fabric.js canvas

http://jsfiddle.net/32Acb/

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

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