MENU


Head Up Display (HUD)

To write text, place a 2D canvas on top. The 2D canvas background is transparent by default. You can also make the background of the WebGL canvas transparent by setting the alpha value of the clear color to 0.0.


RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="/shared/webgl-library.js"></script>
<script id="vs" type="x-shader/x-vertex">
   attribute vec4 p;
   void main(){
      gl_Position = p;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   precision mediump float;
   void main(){
      gl_FragColor=vec4(1.0,0.0,0.0,1.0);
   }
</script>
<script>
function WebGLStart(){
   var webglCanvas = document.getElementById("webglCanvas");
   var gl = webglCanvas.getContext("webgl");
   var canvas2D = document.getElementById("2DCanvas");
   var hud = canvas2D.getContext("2d");
   initShaders(gl,"vs","fs");
   var vertices = new Float32Array([0.0,-0.5,0.0,  -0.5,0.5,0.0,  0.5,0.5,0.0]);
   initArrayBuffer(gl, 'p', vertices, 3);
   gl.clearColor(0.0, 0.0, 0.0, 0.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.TRIANGLES,0,3);
   hud.font = '40px "Arial"';
   hud.fillStyle = 'rgba(0,255,0,1)';
   hud.fillText('This is a triangle.',100,250);
}
</script>
</head>
<body onload="WebGLStart()">
   <p style="position:relative; top:600px">
   WebGL Canvas and 2D Canvas can work side by side.
    The backgrounds are transparent here.
   </p>
   <canvas id="webglCanvas" width="500" height="500"
       style="position:absolute; left:0px; z-index:0"></canvas>
   <canvas id="2DCanvas" width="500" height="500"
       style="position:absolute; left:0px; z-index:1"></canvas>
</body></html>