TextBox width dynamic adjustment fabric js - html5-canvas

Question

I want to modify to the textbox width according to the longest line that user enters, dynamically. I initialize the width = width of my canvas but as soon as user exits editing, the width must shorten to the width of the longest line in user's text written in the textBox.
obj.on(("editing:exited"),function() {
can.setActiveObject(textBox);
var largest = Math.max.apply(Math, can.getActiveObject().__lineWidths);
can.getActiveObject().set("width",largest);
})
Problem is that each time I exit editing, the width reduces and the top line is shifted below. I just cant understand what is happening. Please help at the earliest. Thanks in advance. Please also upload a demo so that I can see the effect of your code.
Update 1 : If I change the line
can.getActiveObject().set("width",largest);
to
can.getActiveObject().set("width",(largest + 1));
It works as desired. I have no idea why this is happening.

Answer 1

I have found the answer to this question by some coding myself.
https://jsfiddle.net/xpntggdo/8/
To all those who might be facing a similar issue, here is the fiddle and here is the code.
textBox.on(("changed"),function(){
var actualWidth = textBox.scaleX * textBox.width;
var largest = canvas.getActiveObject().__lineWidths[0];
var tryWidth = (largest + 15) * textBox.scaleX;
canvas.getActiveObject().set("width",tryWidth);
if((textBox.left + actualWidth) >= canvas.width - 10)
{
textBox.set("width", canvas.width - left - 10)
}
canvas.renderAll();
});
textBox.on(("modified"),function(){
left = textBox.left;
canvas.renderAll();
});