<!DOCTYPE html>
<html>
  <head>
    <style type="text/css" media="screen">
      body {
        outline: 10px solid transparent; /* affects layer sizes */
      }
      canvas {
        margin: 20px;
        width: 200px;
        height: 200px;
        padding: 0 20px;
        background-color: rgba(0, 0, 128, 0.5);
      }
    
      .compare {
        margin: 20px;
        width: 200px;
        height: 200px;
        padding: 0 20px;
        background-color: rgba(0, 0, 128, 0.5);
      }
    </style>
    <script>
        function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
        {
            var canvas = document.getElementById(canvasName);
            var gl = canvas.getContext("experimental-webgl");
            if (!gl) {
                alert("No WebGL context found");
                return null;
            }

            gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
            gl.clearDepth(clearDepth);

            gl.enable(gl.DEPTH_TEST);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

            return gl;
        }

        function drawCanvas(canvasID)
        {
          var gl = initWebGL(canvasID, "", "", [], [ 0, 0, 0, 0 ], 1);
          gl.viewport(0, 0, 200, 200);
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        }

        function init()
        {
          drawCanvas('canvas');
       }
    </script>
  </head>
  <body onload="init()">
   
    <div class="compare"></div>
    <canvas id="canvas" style="left: 20px" width="200" height="200"></canvas>

    <p>Top and bottom should look the same.</p>
  </body>
</html>