Hello everyone, I'm trying to make a resizable canvas following this guides I found in this forum https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html. I'm sure this topic has been discussed plenty of times and I have spent some time searching for some info I could use but with no luck (most of the replies make use of window.innerWidth/innerHeight). The thing is that It seems ok when displayed on a desktop or a mobile device in portrait mode, but when I change to landscape and reload the page nothing is shown on the canvas. As far as I know when it rotates, width becomes greater than height and coordinate system does not change at all, so I don't know what I'm missing 
(something related to mobile resolutions and ppi maybe?)
I'm fairly new to html/css/js and I'm certain that the issue is related to my poor knowledge with some concepts. Here is the code anyway, any help or directions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
<title>My PIXI App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script>
</script>
</head>
<body>
</body>
</html>
* {
padding: 0;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background-color: lightslategrey;
}
canvas {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
const width = 512;
const height = 512;
const appOptions = {
width: width,
height: height,
resolution: window.devicePixelRatio,
roundPixels: true,
transparent: false,
backgroundColor: 0x555555,
};
const app = new PIXI.Application(appOptions);
document.body.appendChild(app.view);
coolResize();
app.ticker.add(coolResize);
drawSquare();
drawSquare(app.view.width / 2 - 25, app.view.height / 2 - 25);
function coolResize() {
const multiplier = app.renderer.options.resolution || 1;
const clientWidth = Math.floor(app.view.clientWidth * multiplier);
const clientHeight = Math.floor(app.view.clientHeight * multiplier);
if (app.view.width !== clientWidth || app.view.height !== clientHeight) {
app.view.width = clientWidth;
app.view.height = clientHeight;
return true;
}
return false;
}
function drawSquare(x = 0, y = 0) {
const graphics = new PIXI.Graphics();
graphics.lineStyle(2, 0xFF00FF, 1);
graphics.beginFill(0xFF00BB, 0.25);
graphics.drawRoundedRect(x, y, 50, 50, 10);
graphics.endFill();
app.stage.addChild(graphics);
}
I've created a fiddle just in case it could be of any help:
https://jsfiddle.net/pmyzLk35/
Thank you so much and I'm sorry for wasting your time.
PS. Btw I don't know why should I resize first and then add the resize function to the ticker, shouldn't adding to the app.ticker be enough? I tried it but does not lead to the same result. I'll take a look to the docs later I guess.