fabricjs - multiple clipping squares on one canvas

Question

I have the following code in this jsfiddle which has 3 images and each one is clipped inside it's own square using html5 canvas and fabricjs:

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

But how can i stop the images going into another clipping region/area? I want the clipping to be specific to that image.

The following question gives an answer with an accompanying jsfiddle but when scaling/rotating the image it completely alters the clipping area. Plus the clipping area doesn't match up with the black 'zones' I've tried adapting the code as it's close to what i need but without success.

Multiple clipping areas on Fabric.js canvas

http://jsfiddle.net/32Acb/

How can i achieve this? My code is:

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