CreateJS Text Bounds

HTML

<script src="https://code.createjs.com/createjs-2015.05.21.combined.js"></script>
<canvas id="test" width="500" height="600"></canvas>

JavaScript

var c = createjs;

var stage = new c.Stage("test");
stage.enableMouseOver();

var align = ["left","center","right"];

for (var i=0; i<align.length; i++) {
    var text = new c.Text(align[i], "48pt Arial");
    text.x = 200;
    text.y = i*80+20;
    text.textAlign = 'right';

    // we want to use getBounds, not getTransformedBounds
    // since the hitArea inherits its owners transformation.
    var bounds = text.getBounds();
    
    // the hitArea is in text's coordinate system
    // so it already will have the x/y applied.
    var hitArea = new c.Shape();
    hitArea.graphics.f("red").r(bounds.x, bounds.y, bounds.width, bounds.height);
    text.hitArea = hitArea;
console.log(text);
    text.cursor = "pointer";
    
    // the background is in the stage's coordinate system
    // so we have to copy over the x/y
    var bg = hitArea.clone();
    bg.x = text.x;
    bg.y = text.y;

    stage.addChild(bg, text);
}

stage.update();