Is there a way to avoid letterboxing with canvas scaling?

Question

I'm working on a small project in Javascript, using Pixi.js as the rendering engine. However, I've only found a few methods of scaling the canvas to full window that seem to work best for the current version. It does have a caveat, however, in that it produces letterboxes on the sides based on the orientation.

Is it possible to avoid the letterboxing at all with Pixi?

This is the code that I have so far, as it relates to the scaling:

var application = null;
var GAME_WIDTH = 1060;
var GAME_HEIGHT = 840;
var ratio = 0;
var stage = null;
application = new PIXI.Application(
{
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    backgroundColor: 0x00b4f7,
    view: document.getElementById("gwin")
});

stage = new PIXI.Container(true);

window.addEventListener("resize", rescaleClient);

function rescaleClient()
{
    ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / 
    GAME_HEIGHT);
    stage.scale.x = stage.scale.y = ratio;
    application.renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio));     
}

My goal with this is to achieve a similar full screen/window effect to Agar.io/Slither.io, however I have not discovered a satisfactory method that allows it easily. There do seem to be examples that use Pixi to achieve this, but the code is more then often closed source, and they seem to use external tools such as Ionic and Phonegap.

It's not clear what's you expect... Keeping aspect ratio without cropping image results in letterboxing. Please explain more precisely or add a picture simulating expected results. — beaver, Jan 12 '18 at 12:51
In essence, I would like to achieve a "true" full window effect, demonstrated by Agar.io and Slither.io. I do understand that those two seem to have been written without the assistance of any public engines, rendering or game, however, and based on my research it may not be fully possible without the help of an outside tool. — Merlin, Jan 12 '18 at 14:46
so what about `application.renderer.resize(window.innerWidth, window.innderHeight);` ? — CoderPi, Jan 12 '18 at 15:12
I did attempt that, but it seems to void the scaling and squashes the stage. — Merlin, Jan 12 '18 at 17:12

score 1 · Accepted Answer · answered Jan 14 '18 at 13:31

I finally found the answer. I was close to the right track, but a few more things needed to be applied.

application.renderer.view.style.position = "absolute";
application.renderer.view.style.display = "block";
application.renderer.autoResize = true;
application.renderer.resize(window.innerWidth, window.innerHeight);

This sets some additional things internally, while a minor modification to the resize script...

ratio = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight / GAME_HEIGHT);
stage.scale.x = stage.scale.y = ratio;
renderer.resize(window.innerWidth, window.innerHeight);

configures things correctly, so that the related Renderer window now fills the screen without squashing the content.

This was not easy to discover. So many tutorials just leave it at the first half, and assume that is what people wish to do.

gvmani · Answer 2 · 2018-01-12T18:26:35.647

var application;
//var GAME_WIDTH = window.screen.width-20;
var GAME_WIDTH = window.innerWidth;
//var GAME_WIDTH = document.body.clientWidth;
var GAME_HEIGHT = window.innerHeight;
var ratiox = 0;
var ratioy = 0;
var container;
application = new PIXI.Application(
{
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    backgroundColor: 0x00b4f7,
    view: document.getElementById("gwin")
});
//document.body.appendChild(application.view);
container = new PIXI.Container(true);
application.stage.addChild(container);

window.addEventListener("resize", rescaleClient);

function rescaleClient()
{
    //ratiox = Math.min(window.innerWidth / GAME_WIDTH, window.innerHeight /     GAME_HEIGHT);
    application.stage.scale.x = ratiox = window.innerWidth / GAME_WIDTH
 application.stage.scale.y = ratioy = window.innerHeight / GAME_HEIGHT;
    application.renderer.resize(Math.ceil(GAME_WIDTH * ratiox), Math.ceil(GAME_HEIGHT * ratioy));     
}

@viewport{
  width:device-width
}

body {
padding :0px;
margin:0px
}

<script src="https://pixijs.download/v4.6.2/pixi.min.js"></script>
<canvas id="gwin"></canvas>

Unfortunately, this produces the exact same problem. After resize, things are squashed/distorted - even adding to the unedited container. Changing the "renderer" size seems to be the direct cause of this. https://i.gyazo.com/646cda234256ac24725e1e55ab157483.png — Merlin, Jan 13 '18 at 17:16

Is there a way to avoid letterboxing with canvas scaling?

2 Answers2