Deselect a selected object in Fabric.js

Question

I have multiple type objects on my canvas. I can do scaling, rotation, etc. everything on a particular object.

But when I select a particular object, I want to change its stroke color.

canvas.observe('mouse:down', function(e) {

    activeInstance = canvas.getActiveObject();
    activeGroupInstance = canvas.getActiveGroup();
    if (activeInstance!=null){        
        activeInstance.set("stroke","#FF0000");
    }
}

The code works well. But the issue is that the stroke color or any other valid property doesn't reflect directly which means I have to deselect a currently selected object to see the change in its properties. So my question is what's going wrong? If this is the usual behavior that we have to deselect/click the selected object, then, how to deselect the selected object using code ie without using mouse clicks simply using a code-snippet.

Answer 1

We can use below mentioned solutions.

To discard all active groups you can use below function.Discards currently active group and fire events If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveGroup();

To discard sigle object you can use like this. Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.

canvas.discardActiveObject();

And i the last finally renders both the top canvas and the secondary container canvas like this.

canvas.renderAll();