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> <!doctype html>
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context--> <!--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> <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> </head>
<body> <body>
<canvas id="glCanvas" width="640" height="480"></canvas> <canvas id="glCanvas"></canvas>
</body> </body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="main.js"></script> <script src="main.js"></script>
</html> </html>

16
main.js
View File

@ -1,7 +1,7 @@
main(); main();
function main() { function main() {
const canvas = document.querySelector("#glCanvas"); const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl"); const gl = canvas.getContext("webgl");
@ -75,6 +75,7 @@ function main() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
function drawMe() {
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0); gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
@ -99,3 +100,16 @@ function main() {
const vertexCount = 4; const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); 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; }