<!DOCTYPE html>
<html>
<head>
<title>Crazybiocomputing: Creating a GL context</title>
<style>
#steps {
float: right;
width: 30%;
}
</style>
<!-- ************** M A I N ************** -->
<script type="text/javascript">
var gl;
function webGLMain() {
var canvas = document.getElementById("crazybiocanvas");
createGLContext(canvas);
display();
}
function createGLContext(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
alert("No webGL: " + e.description);
}
if (!gl) {
alert("GLContext creation failed" + e.description);
}
}
function display() {
/* Render */
gl.viewport(0.0, 0.0, gl.viewportWidth, gl.viewportHeight);
gl.clearColor(1.0,0.5,0.1,1.0);
// Clear Screen And Depth Buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
</script>
</head>
<body onLoad="webGLMain()">
<div id="steps">
<ul>
<li>Step #1: create/config. canvas. </li>
</ul>
</div>
<div id="content">
<canvas id="crazybiocanvas" style="" width="400" height="400"></canvas>
</div>
</body>
</html>