<!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;
        background-color: rgba(0, 0, 128, 0.0);
      }
    </style>
    <script>
        function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth, premultAlpha)
        {
            var canvas = document.getElementById(canvasName);
            var gl = canvas.getContext("experimental-webgl", {premultipliedAlpha: premultAlpha});
            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, premultAlpha)
        {
          var blueColor = 128.0 / 255.0 * (premultAlpha ? 0.5 : 1.0);
          var gl = initWebGL(canvasID, "", "", [], [ 0, 0, blueColor, 0.5 ], 1, premultAlpha);
          gl.viewport(0, 0, 200, 200);
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        }

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

    <!-- Both should look the same. -->
  </body>
</html>