Stage not updating with window.onresize in TypeScript (0.9.1.1)

Question

I have the Renderer class that draws to html5 canvas and I want it to redraw stuff when the window is resized. The problem is that update() code executes only once - inside initialize() - and resizing the window doesn't do anything. On another hand onWindowResized() executes every time the window is resized. So, where is the mistake?

/// <reference path="../lib/easeljs.d.ts" />
/// <reference path="../lib/tweenjs.d.ts" />
/// <reference path="../lib/soundjs.d.ts" />
/// <reference path="../lib/preloadjs.d.ts" />

class Renderer
{
    private mStage:createjs.Stage;
    private mShape:createjs.Shape;

    public initialize (stage:createjs.Stage):void
    {
        this.mStage = stage;
        this.mStage.autoClear = true;
        this.update ();

        window.onresize = this.onWindowResized;
    }

    public update ():void
    {
        if (this.mStage)
        {
            this.mStage.canvas.width = window.innerWidth;
            this.mStage.canvas.height = window.innerHeight;

            this.mShape = new createjs.Shape();
            this.mShape.graphics.beginFill("#dddddd");
            this.mShape.graphics.drawRect(0, 0, this.mStage.canvas.width, this.mStage.canvas.height);
            this.mShape.graphics.beginFill("#ff4400");
            this.mShape.graphics.drawCircle(this.mStage.canvas.width / 2, this.mStage.canvas.height / 2, 25);

            this.mStage.addChild(this.mShape);
            this.mStage.update();
        }
    }

    private onWindowResized (event:UIEvent):void
    {
        this.update();
    }
}

Answer 1

The issue you will have here is that when the event executes, it will be in the context of the event (window for resize, the DOM element for click, mouse overs etc), not your class - so this will not be a handle on your class.

You can solve it by using...

window.onresize = this.onWindowResized.bind(this);

This is one instance where bind is more graceful than fat-arrow syntax.