what is the problem with my left alignment? - konvajs

Question

I use konva.js and I try to align texts with the align function but I can't do it with the left alignment (right and center works on the other hand)
my code
var text1 = new Konva.Text({
y: 26,
fontSize: 40,
text: 'ligne1',
draggable: true,
width : 550,
align: 'center',
});
layer.add(text1);
layer.draw();
Thank you

Answer 1

The text.align() method sets the alignment. In the snippet below I have drawn a rect around the text shape to give a visualisation of the effect.
let
// Set up a stage
stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
}),
layer = new Konva.Layer(),
rect = new Konva.Rect({
x: 0,
y: 26,
width: 550,
height: 40,
stroke: 'magenta'
}),
text1 = new Konva.Text({
y: 26,
fontSize: 40,
text: 'ligne1',
draggable: true,
width: 550,
align: 'center',
fill: 'cyan'
});
stage.add(layer);
layer.add(rect, text1);
layer.draw();
$('#left').on('click', function() {
text1.align('left');
layer.draw();
})
$('#center').on('click', function() {
text1.align('center');
layer.draw();
})
$('#right').on('click', function() {
text1.align('right');
layer.draw();
})
body {
margin: 10;
padding: 10;
overflow: hidden;
background-color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva#^3/konva.min.js"></script>
<p>Click a button to change alignment of the text.</p>
<button id='left'>Left</button>
<button id='center'>Center</button>
<button id='right'>Right</button>
<div id="container"></div>