In this example, we are going to learn to modify the color that we use to clear the canvas:
Using your favorite text editor, open the file
ch1_GL_Attributes.html:<html> <head> <title> WebGL Beginner's Guide - Setting WebGL context attributes </title> <style type="text/css"> canvas {border: 2px dotted blue;} </style> <script> var gl = null; var c_width = 0; var c_height = 0; window.onkeydown = checkKey; function checkKey(ev){ switch(ev.keyCode){ case 49:{ // 1 gl.clearColor(0.3,0.7,0.2,1.0); clear(gl); break; } case 50:{ // 2 gl.clearColor(0.3,0.2,0.7,1.0); clear(gl); break; } case 51:{ // 3 var color = gl.getParameter(gl.COLOR_CLEAR_VALUE); // Don't get confused with the following line. It // basically rounds up the numbers to one decimalcipher //just for visualization purposes alert('clearColor = (' + Math.round(color[0]*10)/10 + ',' + Math.round(color[1]*10)/10+ ',' + Math.round(color[2]*10)/10+')'); window.focus(); break; } } } function getGLContext(){ var canvas = document.getElementById("canvas-element-id"); if (canvas == null){ alert("there is no canvas on this page"); return; } var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; var ctx = null; for (var i = 0; i < names.length; ++i) { try { ctx = canvas.getContext(names[i]); } catch(e) {} if (ctx) break; } if (ctx == null){ alert("WebGL is not available"); } else{ return ctx; } } function clear(ctx){ ctx.clear(ctx.COLOR_BUFFER_BIT); ctx.viewport(0, 0, c_width, c_height); } function initWebGL(){ gl = getGLContext(); } </script> </head> <body onLoad="initWebGL()"> <canvas id="canvas-element-id" width="800" height="600"> Your browser does not support the HTML5 canvas element. </canvas> </body> </html>You will see that this file is very similar to our previous example. However, there are new code constructs that we will explain briefly. This file contains four JavaScript functions:
Function
Description
This is an auxiliary function. It captures the keyboard input and executes code depending on the key entered.
Similar to the one used in the Time for action – accessing the WebGL context section. In this version, we are adding some lines of code to obtain the canvas' width and height.
Clear the canvas to the current clear color, which is one attribute of the WebGL context. As was mentioned previously, WebGL works as a state machine, therefore it will maintain the selected color to clear the canvas up to when this color is changed using the WebGL function
gl.clearColor(See thecheckKeysource code)This function replaces
getGLContextas the function being called on the documentonLoadevent. This function calls an improved version ofgetGLContextthat returns the context in thectxvariable. This context is then assigned to the global variablegl.Open the file
test_gl_attributes.htmlusing one of the supported Internet web browsers.Press 1. You will see how the canvas changes its color to green. If you want to query the exact color we used, press 3.
The canvas will maintain the green color until we decided to change the attribute clear color by calling
gl.clearColor. Let's change it by pressing 2. If you look at the source code, this will change the canvas clear color to blue. If you want to know the exact color, press 3.
In this example, we saw that we can change or set the color that WebGL uses to clear the canvas by calling the clearColor function. Correspondingly, we used getParameter(gl.COLOR_CLEAR_VALUE) to obtain the current value for the canvas clear color.
Throughout the book we will see similar constructs where specific functions establish attributes of the WebGL context and the getParameter function retrieves the current values for such attributes whenever the respective argument (in our example, COLOR_CLEAR_VALUE) is used.