Archive 17/01/2023.

How to set Emscripten canvas to fill window?

godan

I am so bad at javascript…

How do I get the Emscripten canvas to fill the browser window? I can’t find a width/height setting any where in the html. I’ve actually stripped down the default html file. I don’t want full screen mode, just the full browser window. This is what I use:

[spoiler][code]
<!doctype html>

Iogram Demo Project body { font-family: arial; margin: 0; padding: none; } 
.emscripten {
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.emscripten {
    text-align: center;
}

div.emscripten_border {
    border: 1px solid black;
}
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */

canvas.emscripten {
    border: 0px none;
}

#emscripten_logo {
    display: inline-block;
    margin: 0;
}

.spinner {
    height: 30px;
    width: 30px;
    margin: 0;
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    vertical-align: top;
    -webkit-animation: rotation .8s linear infinite;
    -moz-animation: rotation .8s linear infinite;
    -o-animation: rotation .8s linear infinite;
    animation: rotation 0.8s linear infinite;
    border-left: 5px solid rgb(235, 235, 235);
    border-right: 5px solid rgb(235, 235, 235);
    border-bottom: 5px solid rgb(235, 235, 235);
    border-top: 5px solid rgb(120, 120, 120);
    border-radius: 100%;
    background-color: rgb(189, 215, 46);
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#status {
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
    margin-left: 20px;
    font-weight: bold;
    color: rgb(120, 120, 120);
}

#progress {
    height: 20px;
    width: 30px;
}

#controls {
    display: inline-block;
    float: right;
    vertical-align: top;
    margin-top: 30px;
    margin-right: 20px;
}

#output {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    margin-top: 10px;
    border-left: 0px;
    border-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    display: block;
    background-color: black;
    color: white;
    font-family: 'Lucida Console', Monaco, monospace;
    outline: none;
}
</style>
Downloading...
Resize canvas Lock/hide mouse pointer    

[/code][/spoiler]

Here is an example of the current behaviour (Try dragging one of the vertices :slight_smile:): dl.dropboxusercontent.com/u/697 … layer.html

rasteron

Try this…

<style>
#status, #output, #controls {
 display: none !important;
}
</style>

I tested it in chrome and it should work, a bit hacky but that should do it. :wink:

godan

This is certainly closer! However, it looks like it is limiting the canvas to 1600 width? Is this related to the what the Engine initializes the Graphics with? I.e.

	engineParameters_["WindowHeight"] = 1000;
	engineParameters_["WindowWidth"] = 1600;
	engineParameters_["WindowResizable"] = true;
#ifndef EMSCRIPTEN
	engineParameters_["WindowHeight"] = 600;
	engineParameters_["WindowWidth"] = 900;
#endif

Here is a screenshot with your modifications:

rasteron

Looks like it, maybe try setting it manually. I have not played around with emscripten, but if you want get the width and height of the client browser contents, here’s the javascript equivalent…

$(window).innerWidth(); $(window).innerHeight();

and I’m not sure but it looks like body and html tag still has spacing, so maybe try this…

body, html { padding:0; margin:0; }