I am new to EaselJS and I am trying to create a colored container with a 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 doesn't centered in the container, but half of the text is out of the container. What is the problem in my code?

I am new to EaselJS and I am trying to create a colored container with a 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 doesn't centered in the container, but half of the text is out of the container. What is the problem in my code?

• javascript
• canvas
• easeljs
• createjs

1 Answer 1

Your text is horizontally centered around the x-position it was added (in your case x=0), that's why it is out of the container by half. If you want to center your text in your container, you'll have to define 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);