0

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>

1 respuesta 1

1

Si quieres mantener la relación 16:9 basta con que utilices aspect-ratio, que es exactamente lo que buscas

#canvas {
       width:80%;
       margin:0 auto;
       display:block;
        background-color: rgb(148, 71, 71);
        aspect-ratio:16/9;
}
<canvas id="canvas" style="background-color: rgb(148, 71, 71); align-items: center;"></canvas>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.