Text center in container (EaselJS)

Question

I am new to EaselJS and I am trying to create a color container with centered text. This is my code:

var width = 100, height = 100; canvas.width = width + 10; canvas.height = height + 10; var container = new c.Container(); container.x = 10; container.y = 10; container.setBounds(0, 0, width, height); var rect = new c.Shape(); rect.graphics.beginFill('#6e7e8e').drawRect(0, 0, width, height); container.addChild(rect); var text = new c.Text(); text.set({ text: 'hello', textAlign: 'center' }); container.addChild(text); stage.addChild(container); stage.update(); 

For some reason, the text is not concentrated in the container, but half of the text is outside the container. What is the problem in my code?

Answer 1

Your text is horizontally centered around the x-position that it has added (in your case x = 0), so it is in half from the container. If you want to center the text in your container, you will need to determine the position yourself:

 text.set({ text: 'hello', }); var b = text.getBounds(); text.x = (width/2) - (b.width/2); text.y = (height/2) - (b.height/2);