Javascript & Fabric js : how to call object outside its function in this case?

Question

Please take a look at my code : JsFiddle

I want to stop clipping an image when the image is being selected and then clip it back again when the image is not selected . But I don't know how to call each object correctly in fabric js .

Let's see what is in my Jsfiddle. You don't have to read them all.

• Line119 - Line129 is the example part showing what I want to do. You can see that it was done only for pugImg . Please mention this part is just for example so there is a problem that when you click the logo , pugImg will be called too. (don't mind about it. Your answer would be the solution to fix this anyway). So, after you understand my point, please delete this part.
• Line135 - Line142 is the Pseudo-code where I want to finish . Similar to my example, but now, I would like to create those events outside their function so that I can use only one code of events for all objects.

The question is , how to finish Line 135-142?

Sorry for English and the question for being too wide, please feel free to suggest an edit. Thank you.

Answer 1

Please check this fiddle for an updated "clipByName" code, cleaner and easier to use.

You also find solution for your question. I stored a reference to last select object in a canvas property.

canvas.on("object:selected", function (e) {
    e.target.clipTo = null;
    if (canvas.lastSelected && e.target != canvas.lastSelected) {
        canvas.lastSelected.clipTo = clipByName;
    }
    canvas.lastSelected = e.target;
});
canvas.on("selection:cleared", function (e) {
     canvas.lastSelected.clipTo = clipByName;
});

http://jsfiddle.net/ZxYCP/342/