function startCropRect(){
    canvas.remove(el);
    if(canvas.getActiveObject()) {
        object=canvas.getActiveObject();
        if (lastActive && lastActive !== object) {
            lastActive.clipTo = null;
        }
        el = new fabric.Rect({
            fill: 'transparent',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            strokeDashArray: [2, 2],
            opacity: 1,
            width: 1,
            height: 1,
            borderColor: '#36fd00',
            cornerColor: 'green',
            hasRotatingPoint:false,
            objectCaching: false
        });
        el.left=canvas.getActiveObject().left;
        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);
    }  else {
      alert("Please select an object or layer");
    }
}
function endCropRect(){
    var left = el.left - object.left;
    var top = el.top - object.top;
    var width = el.width;
    var height = el.height;
    object.clipTo = function (ctx) {
        ctx.rect(-(width/2)+left, -(height/2)+top,    parseInt(width*el.scaleX), parseInt(height*el.scaleY));
    }
    canvas.remove(canvas.getActiveObject(el));
    lastActive = object;
    canvas.renderAll();
    left = 0;
    top = 0;
}
function startCropEl(){
    canvas.remove(el);
    if(canvas.getActiveObject()) {
        object=canvas.getActiveObject();
        el = new fabric.Ellipse({
        fill: 'transparent',
        originX: 'left',
        originY: 'top',
        stroke: 'yellow',
        strokeDashArray: [5, 4],
        rx: object.width/3,
        ry: object.width/3,
        opacity: 1,
        borderColor: '#36fd00',
        cornerColor: 'green',
        hasRotatingPoint:false,
        objectCaching: false
    });
    el.left=canvas.getActiveObject().left;
    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);
    } else {
    alert("Please select an object or layer");
    }
}
function endCropEl(){
    var left = el.left - object.left;
    var top = el.top - object.top;
    var width = el.rx;
    var height = el.ry;
    object.clipTo = function (ctx) {
        if ((parseInt(width*el.scaleX) === width ||
            parseInt(height*el.scaleY) === width) &&
            (top === 0 && left === 0)) {
            ctx.ellipse(left, top, parseInt(width*el.scaleX),
                parseInt(height*el.scaleY), 45 * Math.PI/180, 0,
                2 * Math.PI);
        }
        else {
            ctx.ellipse(-(width/2)+left, -(height/2)+top,
                parseInt(width*el.scaleX),
                parseInt(height*el.scaleY),
                45 * Math.PI/180, 0, 2 * Math.PI);
        }
    }
    canvas.remove(canvas.getActiveObject(el));
    lastActive = object;
    canvas.renderAll();
    left = 0;
    top = 0;
}