Fabri js: Textbox size is changed after refresh / zoom / rotate / copy

I am using fabric js in my angular application. The issue I am facing is that when I create a Textbox fabric object and either zoom or rotate the canvas, copy the textbox or refresh the page, the textbox height is changed - the text is adjusted to the lines. Here is the code:

object = new fabric.Textbox(this.translate.instant('COMMENTS.CREATE_LABEL'), {
width: 100,
left: this.#x,
top: this.#y,
fontSize: this.toolboxService.selectedFontSize,
stroke: this.toolboxService.objectColor,
fill: this.toolboxService.objectColor,
textAlign: 'center',
fontFamily: 'Arial',
backgroundColor: this.toolboxService.backgroundColor,
padding: 0,
});
}

if (object) {
this.drawService.canvas.add(object);
this.drawService.canvas.setActiveObject(object);
this.#started = true;
this.drawService.canvas.renderAll();
}


This is the before and after of the textbox object:


Continue reading...