Text align doesn't work in Fabric.js IText

Question

I'm newbie using Fabric.js and I have this issue:

I put 2 IText objects in the canvas and now I want to align their texts clicking the buttons, but I doesn't work. I put a console.log() to check if I'm getting the attribute correctly, and it's ok, but It's not applying the text alignment to these IText objects.

This is my code:

var canvas = new fabric.Canvas('canvas');

var text1 = new fabric.IText("hello", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:929,
        fontSize:30
});

var text2 = new fabric.IText("world", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:92929,
        fontSize:30,
        top:40
});

canvas.add(text1);
canvas.add(text2);

$("body").on("click", '.text-align' , function (e) {
      var aling =  $(this).attr('data-action');
      console.log(aling);
      text1.setTextAlign(aling);
      text2.setTextAlign(aling);
      canvas.renderAll();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-6"> <canvas id="canvas" width="200" height="400" style="border:1px solid;"></canvas> </div>
<div class="col-6 col-sm-6 col-md-6"> <button type="button" class="text-align" data-action="left">Left</button>
<button type="button" class="text-align" data-action="center">Center</button>
<button type="button" class="text-align" data-action="right">Right</button> </div>
</div>
</div>

As you can see, text align doesn't change.

I'd like to receive your help.

Answer 1

It works but you need to add more lines in your text block.
You can use \n as separator like : Sample\nLine 1\nLine 2\nLine 3.

The longest text will define the size of the text block.

var canvas = new fabric.Canvas('canvas');

var text1 = new fabric.IText("Sample\nLine 1\nLine 2\nLine 3", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:929,
        fontSize:30
});

var text2 = new fabric.IText("Sample\nLine 1\nLine 2\nLine 3", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:92929,
        fontSize:30,
        top:50
});

canvas.add(text1);
canvas.add(text2);

$("body").on("click", '.text-align' , function (e) {
      var aling =  $(this).attr('data-action');
      console.log(aling);
      text1.setTextAlign(aling);
      text2.setTextAlign(aling);
      canvas.renderAll();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-6"> <canvas id="canvas" width="200" height="400" style="border:1px solid;"></canvas> </div>
<div class="col-6 col-sm-6 col-md-6"> <button type="button" class="text-align" data-action="left">Left</button>
<button type="button" class="text-align" data-action="center">Center</button>
<button type="button" class="text-align" data-action="right">Right</button> </div>
</div>
</div>

        // Create a new Textbox instance 
        var text = new fabric.Textbox(
            'A Computer Science Portal', {
            width: 500,
            textAlign: "center"
        });
  
        // Render the Textbox in canvas 
        canvas.add(text);