Obtaining initial state of target object in object:modified event in fabric.js

Question

I have a drawing application that uses fabric.js and I have implemented an undo/redo function based on the fabric-history repository on github. However, because this approach saves entire canvas states in a stack, the browser quickly becomes non-responsive as it deals with all this data. I would like an undo/redo method that only saves the object that is changed in an interaction with an object on the canvas and not the whole canvas. Using the object:modified event, I see I can get the target object of the event after it is modified, but I also need the object target state before the modification was made to restore it in an undo. Any suggestions on how to obtain this state of an object would be appreciated.

Answer 1

I think you can use the saveState method for it. After calling this method object gets _stateProperty object that contains current values of left, top, and other properties. You can read more about saveState method in doc

I've made a simple example to demonstrate this approach here