Search code examples
javascriptcanvasfabricjs

FabricJS: Vertical Align text center

I am using fabricjs 1.5 and I am stuck on aligning the text in the middle of the line vertically. I am using this code to set the line height

text.setProperty('lineHeight', $scope.lineHeight.current);

It changes the line height of text on canvas but text always remains at the top. I want it to be in the vertically middle. Please help.

Solution

  • You need to use newer versions of fabricjs. 1.5 is too old. For alignment use fabric.Textbox textAlign property.

    DEMO

    var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Textbox('FabricJS is Awsome',{width:300,textAlign:'center'}));
    canvas{
 border: 1px solid #000;
}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<canvas id="canvas" width=400 height=400></canvas>