Fabric.js clipping individual objects dynamically - html

Question

I am dynamically adding a rect element to crop/clip (using clipTo) a selected element,
It works perfect at the first time but when i add a second element to the canvas and begin to crop the second element the first element looses the crop/clip. Below is my code, there are 2 buttons 1 to start crop/clip (places a dynamic rect over the element to be cropped) second to do the cropping/clipping.
$('#crop').on('click', function (event) {
var left = el.left - object.left;
var top = el.top - object.top;
left *= 1;
top *= 1;
var width = el.width * 1;
var height = el.height * 1;
object.clipTo = function (ctx)
{
ctx.rect(-(el.width/2)+left, -(el.height/2)+top, parseInt(width*el.scaleX), parseInt(el.scaleY*height));
}
for(var i=0; i<$("#layers li").size();i++)
{
canvas.item(i).selectable= true;
}
disabled = true;
canvas.remove(canvas.getActiveObject());
lastActive = object;
canvas.renderAll();
});
$('#startCrop').on('click',function(){
canvas.remove(el);
if(canvas.getActiveObject())
{
object=canvas.getActiveObject();
if (lastActive && lastActive !== object) {
lastActive.clipTo = null;
}
el = new fabric.Rect
({
fill: 'rgba(0,0,0,0.3)',
originX: 'left',
originY: 'top',
stroke: '#ccc',
strokeDashArray: [2, 2],
opacity: 1,
width: 1,
height: 1,
borderColor: '#36fd00',
cornerColor: 'green',
hasRotatingPoint:false
});
el.left=canvas.getActiveObject().left;
selection_object_left=canvas.getActiveObject().left;
selection_object_top=canvas.getActiveObject().top;
el.top=canvas.getActiveObject().top;
el.width=canvas.getActiveObject().width*canvas.getActiveObject().scaleX;
el.height=canvas.getActiveObject().height*canvas.getActiveObject().scaleY;
canvas.add(el);
canvas.setActiveObject(el);
for(var i=0; i<$("#layers li").size();i++)
{
canvas.item(i).selectable= false;
}
}
else{
alert("Please select an object or layer");
}
});

Answer 1

Is this what you're looking for? http://jsfiddle.net/86bTc/4/
You set the lastActive.clipTo = null;

Answer 2

try this code
function crop()
{
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
var obj = canvas.getActiveObject();
fabric.Image.fromURL(canvas.toDataURL({
format: 'png',
left: obj.left + 1,
top: obj.top + 1,
width: obj.width * obj.scaleX,
height: obj.height * obj.scaleY,
}), function (img) {
canvas.remove(obj);
canvas.remove(ao);
canvas.add(img);
canvas.renderAll();
})
}
}
;
function Select() {
ao = canvas.getActiveObject();
if (!ao)
return;
canvas.bringToFront(ao);
ao.selectable = false;
canvas.add(new fabric.Rect({
left: 200,
top: 200,
width: 200,
height: 200,
fill: 'transparent',
stroke: '#000000',
hasRotatingPoint: false,
strokeDashArray: [5, 5],
cornerSize: 8,
}));
}