Reset canvas and reload with JSON in Fabric.js

Normally canvas.loadFromJSON() clears the whole canvas before loading new objects. Otherwise you can run canvas.clear();.

http://fabricjs.com/docs/fabric.Canvas.html#clear

How do you load your JSON?

Something like this should work:

var json = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

After loading JSON it's important to call canvas.renderAll(). In the 2nd parameter of canvas.loadFromJSON(json, callback) you can define a cllback function which is invoked after all objects are loaded/added.

http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

I had similar problem when running with React, using canvas.clear() wasn't enough - the objects where theoretically removed but there was still something on the scene, that was messing with the new loaded objects, it could be that the events attached to those removed objects... Anyway now I'm using canvas.dispose() for clearing this canvas when reloading the scene and the problems are gone.

You can check the docs.