pixi How do I make my canvas look the same on other devices?

[IsmaelGames7]

Hello,

How do I make my canvas look the same on all devices?
 

function PixiPlay(){
    var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false});
    document.body.appendChild(renderer.view);
    var root = new PIXI.Container();

I saw a tutorial talking about Pixiv4.
But he talks almost nothing about the canvas 

Can anyone teach me how to do this, in a simple way, please? 

[megmut]

What do you mean 'look the same' Could you elaborate how they don't?? 

[TickleMeElmo]

I'm quite sure by look the same you meant fitting it to the screen size while maintaining the aspect ratio. So I think this here should help you:

var WIDTH = 350;
var HEIGHT = 460;

var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT, {antialias: false, transparent: false});
document.body.appendChild(renderer.view);

var root = new PIXI.Container();

var ratio = Math.min(window.innerWidth / WIDTH, window.innerHeight / HEIGHT);

root.scale.x = root.scale.y = ratio;

renderer.resize(Math.ceil(WIDTH * ratio), Math.ceil(HEIGHT * ratio));

Let me know if it doesn't.

 

You can also put that extra code into function and call it upon window resize event, this way the game will be scaled according to browser size as well, just a little tip :).

[dmko]

Alternatively, https://github.com/kittykatattack/scaleToWindow

Call like window.scaleToWindow( PIXI.Application.renderer.view), e.g:

var app:PIXI.Application = new PIXI.Application(1024, 720, {backgroundColor : 0x1099bb});

document.body.appendChild(app.view);

doScaleWindow();

window.addEventListener("resize", doScaleWindow);

function doScaleWindow() {
    window.scaleToWindow(app.renderer.view, 0xFFFFFF);
}

 

[dmko]

If going that route note the point at the end:

Quote

//5. Return the `scale` value. This is important, because you'll nee this value

//for correct hit testing between the pointer and sprites

https://github.com/kittykatattack/scaleToWindow/blob/master/scaleToWindow.js