Automatic letterbox scaling HTML5 Canvas

Question

In Construct 2 engine there is an automatic letterbox scaling for the game canvas. I've tried to do this in my Javascript game, but i couldn't get the same result. The canvas fits vertically, but sometimes the width is high enough to overflow the screen. How can i make the canvas to fit the screen without overflowing while keeping aspect ratio like in Construct 2?

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
                height: 100vh;
                display: flex;
                justify-content: center;
                background-color: black
            }
        </style>
        <script src="main.js"></script>
        <meta charset="UTF-8">
        <title>My Game</title>
    </head>

    <body id="body">
        <canvas id="canvas"></canvas>
    </body>
</html>

score 0 · Answer 1 · answered May 06 '22 at 23:12

0

I would try to set the <canvas> element max-width: 100% or max-width: 100vw.

answered May 06 '22 at 23:12

Martin Lévai

179
2

i tried this and screen is not overflowing now, but the aspect ratio is wrong – Kélio Minervino May 06 '22 at 23:18
You can also try to set the – Martin Lévai May 06 '22 at 23:30

score 0 · Answer 2 · answered May 07 '22 at 12:56

After trying so hard, i've finally got an answer for my question. I created a flex container with align-items as stretch (so the canvas inside it can be automatically resized), and the width and height of this container is handled by javascript, so when a resize event is triggered, the container is automatically resized to fit in screen keeping aspect ratio.

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
                background-color: black;
            }
            #container {
                display: flex;
                justify-content: center;
                align-items: stretch;
            }
        </style>
        <script src="main.js"></script>
        <meta charset="UTF-8">
        <title>Game</title>
    </head>

    <body>
        <div id="container">
            <canvas id="canvas"></canvas>
        </div>
    </body>
</html>

window.onload = function() {
    var container = document.getElementById("container")
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")

    canvas.width = 640
    canvas.height = 1200
}
window.addEventListener("resize", function() {
    let width_scale = window.innerWidth / canvas.width
    let height_scale = window.innerHeight / canvas.height
    let scale = Math.min(width_scale, height_scale)
    container.style.width = `${canvas.width * scale}px`
    container.style.height = `${canvas.height * scale}px`
})

Automatic letterbox scaling HTML5 Canvas

2 Answers2