mulimoen
/
SummationByParts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add automatic resizing

This commit is contained in:
Magnus Ulimoen 2019-03-27 22:51:03 +01:00
parent 2c5f3cd282
commit f1018f6874
3 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -1,13 +1,15 @@
<!doctype html>
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
<head>
<title>WebGL test"</title>
<meta charset="utf-8">
<meta charset="utf-8" />
<meta name="generator" content="by-hand" />
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
<title>WebGL test</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<canvas id="glCanvas"></canvas>
</body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="main.js"></script>
</html>

16
main.js
View File

@ -1,7 +1,7 @@
main();
function main() {
const canvas = document.querySelector("#glCanvas");
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
@ -75,6 +75,7 @@ function main() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
function drawMe() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
@ -99,3 +100,16 @@ function main() {
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
}
// https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
drawMe();
}
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
}

3
style.css Normal file
View File

@ -0,0 +1,3 @@
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }