<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .container {
        width: 60px;
        height: 60px;
      }
      #canvas-simple {
        /* No box decorations or background image. */
        /* Solid color background only. */
        background-color: green;
      }
    </style>
    <script>
        function drawCanvas(canvasID) {
            var canvas = document.getElementById(canvasID);
            var gl = canvas.getContext("webgl");

            // Fill NW quadrant with opaque blue.
            gl.enable(gl.SCISSOR_TEST);
            gl.scissor(0, canvas.height / 2, canvas.width / 2, canvas.height / 2);
            gl.clearColor(0, 0, 1, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
        };

        function doTest() {
            // Simple background can be direct-composited with content-layer.
            // The container GraphicsLayer does not paint anything.
            drawCanvas('canvas-simple');
        };
        window.addEventListener('load', doTest, false);
    </script>
  </head>

  <body>
    <div class="container">
      <canvas id="canvas-simple" width="50" height="50"></canvas>
    </div>
  </body>
</html>