Centre a text inside a rectangle in easelJS

Question

I am new to easelJS. I want to create a rectangle and then I want to enter the text inside as it is typed in an input box. Here is my code

 function init() {
                    var stage = new createjs.Stage("canvas");
                    var layoutWidth = 0.8 * stage.canvas.width;
                    var layoutHeight = 0.6 * stage.canvas.height;
                    var layoutRect = new createjs.Shape();
                    layoutRect.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth) / 2, (stage.canvas.height - layoutHeight) / 2, layoutWidth, layoutHeight);
                    var button1 = new createjs.Shape();
                    button1.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth) / 2, (stage.canvas.height - layoutHeight) / 2 + 0.90 * layoutHeight, layoutWidth / 2, 0.10 * layoutHeight);
                    var button2 = new createjs.Shape();
                    button2.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth) / 2 + layoutWidth / 2, (stage.canvas.height - layoutHeight) / 2 + 0.90 * layoutHeight, layoutWidth / 2, 0.10 * layoutHeight)
                    var inputText = document.getElementById("input") ;
                    var text = new createjs.Text();
                    text.set({
                    text: inputText.value
                        })
                    stage.addChild(layoutRect, button1, button2,text);
                    stage.update();

                    inputText.onkeyup = function(){
                        text.set({
                        text: inputText.value
                            })
                        stage.update()
                        }
                }

I want this text to appear inside button1 and aligned properly in the centre. Please explain how to do that. Thank you

Answer 1

A few notes:

I recommend making the button drawn at [0, 0], and then moving it, instead of drawing its contents where you want them on the screen.

button.graphics.beginStroke("black").drawRect(0, 0, buttonWidth, buttonHeight);

Wrap the graphics and label inside of a Container, and make that "button1" instead, then moved the container to where you want it to adjust both the graphics and label

var button1 = new createjs.Container();
var bg1 = new createjs.Shape();
var text = new createjs.Text();
button1.addChild(bg1, text);

Use textAlign and textBaseline (both HTML canvas context properties) to draw the text from the center. You can then set it's x and y position to half the width of the button.

text.set({
  textAlign: "center",
  textBaseline: "middle",
  x: buttonWidth / 2,
  y: buttonHeight / 2
})

You could also measure and position top-left-aligned text with the getBounds() method, but centering the text is easier, since you don't have to change it when text changes.

I made a spike to show this in action. http://jsfiddle.net/lannymcnie/cb5tbx5t/

Cheers.