Application size and width does not reflect width and height of target view

[DavidGOrtega]

Hi, I'm here again! 😊

var app = new PIXI.Application( {transparent:true, antialias: true, view: mycanvas} );

Should not the height and width be aware of target view width and height instead of 800x600 as default?

[ivanpopelyshev]

Pixi does not have that logic, its your job to call app.renderer.resize and pass screen width and height there.

There's autoResize: true parameter that sets CSS width and height, useful with reslution: devicePixelRatio.

[DavidGOrtega]

Now I'm doing this:

var canvas      = document.getElementById('c');
    canvas.width    = window.screen.width;
    canvas.height   = window.screen.height;

    var app = new PIXI.Application(canvas.width, canvas.height, {view: canvas, forceCanvas:false, transparent:true, antialias: true});

I was recently scratching my head on how to support autoResize and resolution. Is there any guide about that in the Docs? Or any interesting resource?

[ivanpopelyshev]

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L218

Basically, if you ask app to resize to (W,H) with resolution A,, you'll get canvas of size (W*A, H*A) and if autoResize is true, then (W,H) will be passed to CSS. real pixels will be stored in renderer.view.width because its a canvas. Screen (css) pixels size is in renderer.screen. For your elements (Sprites, Containers) you have to specify screen coordinates, so resolution doesnt affect them.

That's all. If you want more - you have to experiment. I gave you the only part of code that responsible for canvas size.

Resolution in that case is zoom, like, for retina screens :)

[bigtimebuddy]

@DavidGOrtega hopefully this will help:

Resize to Parent Node
https://jsfiddle.net/bigtimebuddy/wLg7jezb/

Resize to Fullscreen
https://jsfiddle.net/bigtimebuddy/oaLwp0p9/

[ivanpopelyshev]

@bigtimebuddy please add it to wiki.

[bigtimebuddy]

Done. https://github.com/pixijs/pixi.js/wiki/v4-Tips,-Tricks,-and-Pitfalls#resizing-renderer

[DavidGOrtega]

Thanks a lot guys!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.