$("canvas").css("width... reverts back on every update, how can I set the size such that it doesn't revert back?

[01AutoMonkey]

I've created some code which adjusts the aspect ratio of the game in regards to the browsers inner width and height and then fills out the space of the inner width and height exactly, but the way I'm doing that last part means I have to do it on every update, if I only do it once the game reverts to it's original, but correct aspect ratio, size.

 

So I have the following:

var that = this;$(window).resize(function() { that.resize(); } );

And in this.resize:

var w = rootWidth;var h = rootHeight;//this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;if (window.innerWidth > window.innerHeight) {  var width = w+0.4*window.innerWidth;  var height = (width / window.innerWidth) * window.innerHeight;} else {  var height = h+0.4*window.innerHeight;  var width = (height / window.innerHeight) * window.innerWidth;}this.game.width = width;this.game.height = height;this.scale.width = width;this.scale.height = height;this.game.canvas.width = width;this.game.canvas.height = height;//this.game.world.setBounds(0, 0, width, height);this.game.scale.width = width;this.game.scale.height = height;this.game.camera.setSize(width, height);this.game.camera.setBoundsToWorld();this.game.renderer.resize(width, height);// Tell ScaleManager that we have changed sizesthis.game.scale.setSize();

Which gives me a game which always keeps the same aspect ratio as the window, but now I want to scale the game to fill the window exactly (which should be easy given that the game has the same ratio as the window), so far I have the following but it needs to be called on every update loop to maintain itself:

var size = this.calculateAspectRatioFit(this.game.width, this.game.height, window.innerWidth, window.innerHeight);$("canvas").css("width", size.width);$("canvas").css("height", size.height);$("canvas").width(size.width);$("canvas").height(size.height);

And calculateAspectRatioFit contains:

var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);return { width: srcWidth*ratio, height: srcHeight*ratio };

So how do I tell the game to scale like I do already but such that the game doesn't just revert back on every update?

 

--Edit--

 

I've created a small working jsfiddle which implements the above code, and again everything works except for the scaling, I have to call my css width and height on every update to maintain the correct size/scaling: http://jsfiddle.net/yeuyvx6b/

 

--Edit--

 

Oh and the reason I want to only call the scaling once is because it drains resources to scale it again and again on every update call.

[jure]

on resize, as first line set a global variable "justResized=true;"

put the canvas resize code in an "if(justResized)"

At the end of that "if" add "justResized=false;"