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.

Answer 1

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.