global X and Y after rotation

Question

I'm trying to get the global coordinates of a DisplayObject that has regX,regY and rotation applied to it. Consider the following:

function drawShapes(){
    function createRectangle(color){
        var rect = new createjs.Shape();
        rect.graphics.beginFill(color).drawRect(0, 0, 100, 100);
        stage.addChild(rect);

        return rect;
    }

    var rect1 = createRectangle("rgba(255, 0, 0, 1)");
    rect1.x = 100;
    rect1.y = 100;
    var ltg = rect1.localToGlobal(0, 0);
    console.log(`rect1 x: ${rect1.x}, y: ${rect1.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    var rect2 = createRectangle("rgba(0, 255, 0, 1)");
    rect2.x = 100;
    rect2.y = 100;
    rect2.regX = 50;
    rect2.regY = 50;
    ltg = rect2.localToGlobal(0, 0);
    console.log(`rect2 x: ${rect2.x}, y: ${rect2.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    var rect3 = createRectangle("rgba(0, 0, 255, 1)");
    rect3.x = 100;
    rect3.y = 100;
    rect3.regX = 50;
    rect3.regY = 50;
    rect3.rotation = 45;
    ltg = rect3.localToGlobal(0, 0);
    console.log(`rect3 x: ${rect3.x}, y: ${rect3.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    stage.update();
}

http://jsfiddle.net/2gvv42or/

The output of this is:

rect1 x: 100, y: 100, globalX: 100, globalY: 100 which obviously makes sense

rect2 x: 100, y: 100, globalX: 50, globalY: 50 this makes sense too, the green rect is shifted 50 pixels up and left

rect3 x: 100, y: 100, globalX: 100, globalY: 29.289321881345245 this baffles me. it should be the same as rect2. it seems to have rotated, regardless of regX and regY

Am I misunderstanding something or is there a bug / WAI in createjs. In any case, is there a workaround?

Answer 1

Okay I got it figured out now. You have to pass in the regX and regY to localToGlobal.

localToGlobal(50, 50);