I cannot get the textAlign working in fabric.js The fontSize, fontBackground work properly, but not textAlign. Am I missing something?

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

$('button.addText').click(function() {
  var text = new fabric.Text($(this).siblings().val(), {
    textAlign: 'center',
    fontSize: 40
  });
  canvas.add(text);
});

I cannot get the textAlign working in fabric.js The fontSize, fontBackground work properly, but not textAlign. Am I missing something?

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

$('button.addText').click(function() {
  var text = new fabric.Text($(this).siblings().val(), {
    textAlign: 'center',
    fontSize: 40
  });
  canvas.add(text);
});

• javascript
• fabricjs

3 Answers 3

var canvas = new fabric.Canvas('myCanvas');
var align = ["left", "center", "right" , "justify"];
var el = document.getElementById('res');
var txt = 'FabricJS \n is \nAwsome';

var text = new fabric.Text(txt, {
    textAlign: 'left', //"left", "center", "right" or "justify".
    width:450,
    fontSize: 40
  });
canvas.add(text);
changeAlign();

function changeAlign(){
 var val = align[Math.floor(Math.random() * align.length)];
 text.set('textAlign',val);
 el.innerHTML = 'Text Alignment : ' +val;
 canvas.setActiveObject(text);
 canvas.renderAll();
}

canvas {
 border : 2px dotted blue;
}

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="myCanvas" width="600" height="300"></canvas><br>
<button onclick='changeAlign()'>Change align</button><p id='res'></p>

@AndreaBogazzi He is right. In Text, box depends on the width of first line, if you want then it will work for multi line texts . Check Snippet.

I guess the main point is that if the text is one line only, fabric will size the text bounding box to the necessary length and there will not be any alignment to do.

If the text is multiline the alignment should work.

The alignment is INSIDE the box and is not the direction where the box grows when the text grows.

It depends on the type of the object. If you have for example IText or Text the alignment will work only in the area of the canvas itself.

For example if you want to align an IText type on the center of the canvas you would use:

canvas.getActiveObject().centerV();
canvas.getActiveObject().setCoords(); 
canvas.renderAll();

If you want to center the text itself it would apply only to Textbox type, you would then be able to use:

canvas.getActiveObject().textAlign = "center";