Text align doesn't work in Fabric.js IText

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/bootstrap@4.0.0/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.

Solution

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/bootstrap@4.0.0/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);