canvas adapted to container size

[bilboon]

Hi all,

 

I'm new to phaser and i'm trying to use it in a webapp powered by angularjs. My canvas is using ~80% of the window (the other 20% are reserved for a topbar and contextual panel). I want to scale canvas content to fill the 80%, but Phaser.StageScaleMode seems to use window.innerWidth and window.innerHeight to compute the ratio scaling in SHOW_ALL and EXACT_FIT mods.

 

Canvas container size is managed with angular and computed on fly when window is resized.

 

How can i force phaser to adapt the scaling ratio to the canvas container size ? Must i patch Phaser.StageScaleMode, recreate a Phaser.Game on each resize, or is there a prefered hidden trick  ?

 

Thx 

 

 

 

 

[Michel (Starnut)]

Did you try calling

game.stage.scale.refresh();

?

[woratana]

This sounds very interesting using Angular JS with Phaser

Could you tell us what kind of webapp you are creating?

[maf]

i use this in my Game class and call it from the boot method - basically set the width and height properties and call setSize() on the ScaleManager:

resizeCanvasToContainerElement(){	var containerElement = this.canvas.parentElement;	var containerWidth = containerElement.offsetWidth;	var containerHeight = containerElement.offsetHeight;	var xScale = containerWidth / this.width;	var yScale = containerHeight / this.height;	var newScale = Math.min( xScale, yScale );	this.scale.width = newScale * this.width;	this.scale.height = newScale * this.height;	this.scale.setSize();	this.canvas.style.position = 'absolute';	this.canvas.style.top = '0';	this.canvas.style.left = '0';}