Emscripten scale-to-fit canvas to window view script.

This topic contains 0 replies, has 1 voice, and was last updated by Richard Betson 8 months ago.

Viewing 1 post (of 1 total)

Author

Posts

August 21, 2018 at 2:02 am #15316

Richard Betson

Participant

Hi,

I came up with this to scale my apps canvas to fit the window view. Movement of the mouse, clicking on the canvas or changing focus will trigger the script and scale the canvas to fit. I use it in my web app entry page on my website.

Just slip this into your projects Emscripten launch HTML page.

<script type="text/javascript">
var canvas = document.querySelector('canvas');

function resize() {

canvas.style.width = window.innerWidth+'px';
canvas.style.height = window.innerHeight+'px';

}


window.addEventListener('blur', resize, false);
window.addEventListener('mousemove', resize, false);
canvas.addEventListener('resize', resize, false);
window.addEventListener('click', resize, false);
</script>

var canvas = document.querySelector('canvas');

function resize() {

canvas.style.width = window.innerWidth+'px';

canvas.style.height = window.innerHeight+'px';

}

window.addEventListener('blur', resize, false);

window.addEventListener('mousemove', resize, false);

canvas.addEventListener('resize', resize, false);

window.addEventListener('click', resize, false);

</script>

Here is my entire launch HTML file. You can just replace the “your whatever’s” with your own.

<!doctype html>

<html>

<head>
<title>your page</title>
<link rel="stylesheet" href="style.css">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
position: absolute;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */

}
</style>
</head>

<body style="background-image:url('http://your-website.com/your-image.jpg')">

<div class="status">
<span id="status"></span>
</div>

<div class="canvas">
<div class="center">
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
</div>
</div>


<script type="text/javascript">
var canvas = document.querySelector('canvas');

function resize() {

canvas.style.width = window.innerWidth+'px';
canvas.style.height = window.innerHeight+'px';

}


window.addEventListener('blur', resize, false);
window.addEventListener('mousemove', resize, false);
canvas.addEventListener('resize', resize, false);
window.addEventListener('click', resize, false);
</script>

<script type="text/javascript">

var statusElement = document.getElementById('status');

var Module = {

preRun: [],

postRun: [],

print: (function() {

var element = document.getElementById('output');

if (element) element.value = ''; // clear browser cache

return function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
// These replacements are necessary if you render to raw HTML
//text = text.replace(/&/g, "&amp;");
//text = text.replace(/</g, "<");
//text = text.replace(/>/g, ">");
//text = text.replace('\n', '<br>', 'g');
console.log(text);
if (element) {
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
})(),


canvas: (function() {

var canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas;

})(),

setStatus: function(text) {

if( !statusElement ) return;
if( text ){
statusElement.innerHTML=text;
statusElement.hidden=false;
}else{
statusElement.hidden=true;
}
}
};

Module.setStatus( 'Downloading...' );
window.resizeTo(500,500)
window.onerror = function(event) {

// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
Module.setStatus('Exception thrown, see JavaScript console');
window.scrollTo(0,0);

Module.setStatus = function(text) {

if (text) Module.printErr('[post-exception status] ' + text);
};
};


</script>


<script async type="text/javascript" src="your-webapp.js">

</script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!doctype html>

<html>

<head>

<style>

html, body {

width: 100%;

height: 100%;

margin: 0px;

border: 0;

position: absolute;

overflow: hidden; /* Disable scrollbars */

display: block; /* No floating content on sides */

}

</style>

</head>

</div>

</div>

var canvas = document.querySelector('canvas');

function resize() {

canvas.style.width = window.innerWidth+'px';

canvas.style.height = window.innerHeight+'px';

}

window.addEventListener('blur', resize, false);

window.addEventListener('mousemove', resize, false);

canvas.addEventListener('resize', resize, false);

window.addEventListener('click', resize, false);

</script>

var statusElement = document.getElementById('status');

var Module = {

preRun: [],

postRun: [],

print: (function() {

var element = document.getElementById('output');

if (element) element.value = ''; // clear browser cache

return function(text) {

if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');

// These replacements are necessary if you render to raw HTML

//text = text.replace(/&/g, "&");

//text = text.replace(/</g, "<");

//text = text.replace(/>/g, ">");

//text = text.replace('\n', '<br>', 'g');

console.log(text);

if (element) {

element.value += text + "\n";

element.scrollTop = element.scrollHeight; // focus on bottom

}

};

})(),

canvas: (function() {

var canvas = document.getElementById('canvas');

// As a default initial behavior, pop up an alert when webgl context is lost. To make your

// application robust, you may want to override this behavior before shipping!

// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2

canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

return canvas;

})(),

setStatus: function(text) {

if( !statusElement ) return;

if( text ){

statusElement.innerHTML=text;

statusElement.hidden=false;

}else{

statusElement.hidden=true;

}

};

Module.setStatus( 'Downloading...' );

window.resizeTo(500,500)

window.onerror = function(event) {

// TODO: do not warn on ok events like simulating an infinite loop or exitStatus

Module.setStatus('Exception thrown, see JavaScript console');

window.scrollTo(0,0);

Module.setStatus = function(text) {

if (text) Module.printErr('[post-exception status] ' + text);

};

</script>

</script>

</body>

</html>

Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Emscripten scale-to-fit canvas to window view script.

Archives

Recent Replies

What is this?