Quiero redimensionar un canvas manteniendo una relación de aspecto 16:9 con respecto al tamaño de la pantalla, pero al ejecutar el código se crea un rectángulo muy pequeño que no sigue la relación de aspecto
const fps = 30;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
setInterval(update, 1 / fps * 1000);
function update() {
ctx.canvas.width = sizeScaled(16, 9)[0];
ctx.canvas.height = sizeScaled(16, 9)[1];
}
function sizeScaled(w, h) {
const ratio = w / h;
const width = window.innerWidth - window.innerWidth * .05;
const height = window.innerHeight - window.innerHeight * .05;
if(ratio > 1) {
return [width, height / ratio];
} else {
return [width * ratio, height];
}
}
#canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: rgb(148, 71, 71);
}
<canvas id="canvas" style="background-color: rgb(148, 71, 71); align-items: center;"></canvas>