Resizing

[mwatt]

I've tried calling the resize method on the canvas renderer but it is not working (probably I am doing something silly, or not doing something I should).  What are folks doing to handle resizing in the browser or an orientation change event on a mobile device?  Is there some technique to use in conjunction with resize or perhaps it is ok just to destroy and recreate the renderer?

[bubamara]

Hi,

 

this works like charm for me

var stage = new PIXI.Stage(0x667788);	var renderer = PIXI.autoDetectRenderer(400, 300);document.body.appendChild(renderer.view);// resize rendererrenderer.view.style.width = '800px';renderer.view.style.height = '600px';

Important part is adding 'px' after number

[mwatt]

You know, I was in fact re-sizing the canvas (my drawingArea below) in addition to re-sizing the renderer with code that looked something like this:

 

    renderer.resize(width, height);

    drawingArea.style.width = width + "px";

    drawingArea.style.height = height + "px";

 

Inexplicably (at least to me), when I remove the call to renderer.resize, and only resize the actual canvas, it works!  So once again you have solved my problem.  I am in your debt sir.

[bubamara]

you're welcome

 

renderer.resize(800,600) will resize whole viewport and canvas, so new bottom-right corner of the stage is 800,600

changing canvas drawingArea.style.width / height scales up viewport and bottom-right corner of the stage is still 400,300

hope my explanation makes sense

[edWAR6]

On 12/12/2013 at 2:59 AM, bubamara said:

renderer.resize(800,600) will resize whole viewport and canvas, so new bottom-right corner of the stage is 800,600

changing canvas drawingArea.style.width / height scales up viewport and bottom-right corner of the stage is still 400,300

hope my explanation makes sense

Wow thank you so much, several days stuck on this issue, thanks.