Scale Text from it's Center

I'm very new to Canvas and easeljs and I'm trying to get text to scale in from it's center. I'm able to center the text correctly on the Canvas, but I'm not sure how to handle the scaling in the Tween.

I'm pretty sure I need to set the regx/regy, but I'm not sure exactly where and what I should have that set to.

I've made a quick jsfiddle here without any regx/regy setting, and you can see the text scales from the top-left. https://jsfiddle.net/1woLdrqt/10/

If anyone can point me in the right direction I'd be forever grateful!!

Thanks!!

<canvas id="canvas" style="display: block; background-color: #123; width: 300px; height: 200px;" width="300" height="200"></canvas>
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>

var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);

var text = new createjs.Text("hello", "900 36px Ariel", "#fff");
text.name = "myText";

var b = text.getBounds();

text.x = ( ($("#canvas").width() / 2) - (b.width / 2) ); 
text.y = ( ($("#canvas").height() / 2) - (b.height / 2) );

stage.addChild(text);

$("#zoomIn").click(function() {
    var x = stage.getChildByName("myText");
    var b = x.getBounds();

    createjs.Tween.get(x)
    .to({
        scaleX: 2,
        scaleY: 2,
    }, 2000);
});

$("#zoomOut").click(function() {
    var x = stage.getChildByName("myText");
    var b = x.getBounds();

    createjs.Tween.get(x)
    .to({
        scaleX: 1,
        scaleY: 1,
    }, 2000);
});

Solution

Your thought is right. Setting regX and regY is the best approach to solve the problem. EaselJS's documentation defines these properties pretty clearly. As showed in examples provided in their descriptions you want them to be set to 50% of text's width (regX) and height (regY) dimensions.

Here is the implementation of the above in your code (JsFiddle):

var b = text.getBounds();

text.regX = b.width / 2;
text.regY = b.height / 2;

// We also don't need to correct the initial position anymore as the origin point of the text is now in its center. 
text.x = ($("#canvas").width() / 2); // - (b.width / 2)
text.y = ($("#canvas").height() / 2); // - (b.height / 2)