Easel.js canvas not updating

Question

I have the following code in which I am trying to draw a rectangle using createjs

function Game(canvas) {
    var stage = new createjs.Stage(canvas),
        character = new createjs.Shape();

    this.init = function (x, y, angle) {
       character.graphics.beginFill("red").drawRect(x, y, 100, 100);
       character.rotation = angle;
       stage.addChild(character);
       stage.update();
    }

}

Game.run = function (canvas) {
    var game = new Game(canvas),
        startX = 400,
        startY = 200,
        startAngle = 45;
    game.init(startX, startY, startAngle);

}

But it doesn't display anything. Have I missed something obvious?

jsfiddle of the issue

Answer 1

Your rotation is not working like you probably think it is.

The origin of your 'character' is at 0,0 - and not at the x,y of the drawRect call. By rotating it you probably move it out of your canvas/sight.

Change the startX and startY to 100 and see part of your cube appear! (in the fiddle)

If you want the rotation to be applied only on the cube relative to its own top-left corner. You should call drawRect(0, 0, 100, 100) to draw it and change the x and y properties of character to move the square.

Answer 2

You usually want to move the coordinates of your shape in which you always draw your graphics starting from the origin (0,0).

So instead of

character.graphics.beginFill("red").drawRect(x, y, 100, 100);

You should have something like

character.graphics.beginFill("red").drawRect(0, 0, 100, 100);
character.x = x;
character.y = y;

FIDDLE