requestAnimationFrame loses scope

When I do a requestAnimationFrame it loops through once then it loses its scope. At the moment i don't want to use the arrow function because IE 11 doesn't support it (ref http://caniuse.com/#feat=arrow-functions). Does anyone know a way around this. Here is a sample code

(function(){

var main =function(){
this.init();
}

var p = main.prototype;

p.init = function(){

this.stage = new PIXI.Container();
this.renderer = new PIXI.autoDetectRenderer(1024,768,{id:"stage"});
document.body.appendChild(this.renderer.view);

this.updateStage();

}

p.updateStage= function(){
requestAnimationFrame(this.updateStage);
this.renderer.render(this.stage);
}

}())

As soon as it tries to render it calls this.renderer becomes undefined. 

I have tried binding the requestAnimationFrame which didn't work. So i console.log it out. the first time it logs i get main property with the correct property such as main.stage, main.renderer. The second time it returns me Window (in chrome). I am wondering if anyone knows how to keep the scope.