EaselJS - Rotate a shape around its center

easeljs, rotation

Solution

You're drawing the rectangle within the shape at the point 100, 100 and then setting the registration point to 20, 20 which means you're rotating a huge shape with a rectangle in one corner of it from (more or less) a point at the opposite corner.

In the following I draw the rectangle at the origin of the new shape and then place the shape itself using the x and y properties:

//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRect(0, 0, 40, 40);
circle.regX = circle.regY = 20;

circle.x = circle.y = 100;

//Add Shape instance to stage display list.
stage.addChild(circle);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);

function onTick() {
    circle.rotation++;
    stage.update();
}

See fiddle.

Problem

Original source