| <!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> |
