Confine egui panels to a window in the center of a screen using wasm #5611

tvdboom · 2025-01-16T09:57:59Z

tvdboom
Jan 16, 2025

Hi,

I am making a game with bevy and egui. I convert the game to wasm using wasm-bindgen to play it on a browser.

However, it doesn't look clean since the egui panels always fill out the whole screen, while I want it to be constrained to the size of the playable area (which has a fixed size).

This is how it looks now:

This is how it looks when running cargo run (not on browser) and how I want it to appear on the center of the browser's page.

The content of the index.html looks like this:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Fortress</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: rgb(25, 25, 25);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        canvas {
            position: absolute;
            width: 1440px;  <== This is not being respected!
            height: 834px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            box-sizing: content-box;
        }
</style>
</head>
<body>
<canvas id="fortress"></canvas>
<script type="module">
    import init from './fortress.js';
    init();
</script>
</body>
</html>

Any idea how I can achieve this?

P.S. I already tried wrapping the <canvas> in a div with relative position but that didn't work.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Confine egui panels to a window in the center of a screen using wasm #5611

{{title}}

Replies: 0 comments

Select a reply

Confine egui panels to a window in the center of a screen using wasm #5611

tvdboom Jan 16, 2025

Replies: 0 comments

tvdboom
Jan 16, 2025