Capturing and saving objects coordinates with fabric js - html

Question

I am working on an app where a user can create multiple boxes on a canvas, save the coordinates of each box(Top, Left, Width, Height) individually in database, and later retrieve them back on a canvas, whenever needed to update its position.
I am able to do all this, except updating the position of the box.
For eg. Lets say user selects "box1":
1) canvas.on('mouse:down', function (evt) { }); - gives the current coordinates for box1, that matches with the database entry.
2) canvas.on('object:modified', function (evt) { }); - gives the new coordinates for box1, that I can use to update the database fields.
The only problem is, if the user selects box1, drag it some where, drops it, and again drags it to a new position. I loose the original value (since he clicked mouse:down twice for box1), and thus not able to finally identify, which box was updated wrt database.
Below is the code snippet:
window.addRect = function() {
var box = new fabric.Rect({
left: 0,
top: 0,
stroke: 'red',
fill: 'rgba(255,0,0,.4)',
width: 50,
height: 50,
});
box.hasRotatingPoint = false;
canvas.add(box);
}
canvas.on('object:modified', function (evt) { // for updated values
var modifiedObject = evt.target;
console.log('modifiedObject: ' + modifiedObject.get('left'), modifiedObject.get('top'), modifiedObject.getScaledWidth(), modifiedObject.getScaledHeight());
});
canvas.on('mouse:down', function (evt) { // for original values
var downObject = evt.target;
console.log('downObject: ' + downObject.get('left'), downObject.get('top'), downObject.getScaledWidth(), downObject.getScaledHeight()); });
Is there anything other than mouse:down and object:modified, that I can use? I am looking for a solution in Extjs.