How to set absolute position for each item in IText Fabricjs - html5-canvas

Question

Please help me, how to set absolute position of each text item in IText Fabricjs. In this example, I want text "KÍNH MỜI" is align horizontal center with below text.
Expected Result:
Actual Result:
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>

Answer 1

You need textAlign: center. I also changed lineHeight to 1 (default is 1.16) to make it look more like your expected result.
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>