Render selected object only while moving, scaling and rotating

Question

I am currently working on a "Photo Collage Maker" project which needs larger canvas area and hundreds of objects(text, images, shapes, clip-arts etc.). The problem is while moving, scaling and rotating those objects, Fabric.js render all the objects which makes it too slow. I want to render only the selected objects on top of the fabric canvas. I have tested renderOnAddition, renderTop also but they are not what I want.

I want the following:

canvas.on('object:moving', function(e) {
    var activeObject = e.target;
    //canvas.renderAll();
    canvas.renderObjects(activeObject);
});

Now instead of canvas.renderAll(), I need method like canvas.renderObjects(activeObject). How can I achieve this functionality in Fabric.js?

Here is my project : Edit Photos For Free

Answer 1

Your best bet is to have a second canvas, in front of the main one, on which you move/scale/rotate the current item(s).

You mention wanting to render the selected objects on top of the fabric canvas, so this should meet your requirements.

On ending the move/scale/rotate you will have to restore the original canvas elements, apply your changes, and allow it to do a full redraw.