<!DOCTYPE html> 
<html> 
<head> 
<script> 
  function load() {
      var canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 100;
      var context = canvas.getContext('2d');

      context.fillStyle = "rgba(255, 0, 0, 1)";
      context.fillRect(0, 0, context.canvas.width/3, context.canvas.height);

      context.fillStyle = "rgba(255, 0, 0, 0.5)";
      context.fillRect(context.canvas.width/3, 0, context.canvas.width/3, context.canvas.height);

      context.fillStyle = "rgba(255, 0, 0, 0)";
      context.fillRect(2*context.canvas.width/3, 0, context.canvas.width/3, context.canvas.height);

      document.getElementById("jpg2dToDataUrl").style.imageRendering = "pixelated";
      document.getElementById("jpg2dToDataUrl").style.backgroundImage = ["url(", context.canvas.toDataURL("image/jpg"), ")"].join("");
      document.getElementById("png2dToDataUrl").style.imageRendering = "pixelated";
      document.getElementById("png2dToDataUrl").style.backgroundImage = ["url(", context.canvas.toDataURL("image/png"), ")"].join("");
      
      var canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 100;
      var gl = canvas.getContext("webgl") 
      || canvas.getContext("experimental-webgl");
      
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(0, 0, canvas.width/3, canvas.height);
      gl.clearColor(1.0, 0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.scissor(canvas.width/3, 0, canvas.width/3, canvas.height);
      gl.clearColor(1.0, 0, 0.0, 0.5);
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.scissor(2*canvas.width/3, 0, canvas.width/3, canvas.height);
      gl.clearColor(1.0, 0.0, 0.0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      document.getElementById("pngwebglToDataUrl").style.imageRendering = "pixelated";
      document.getElementById("jpgwebglToDataUrl").style.imageRendering = "pixelated";
      document.getElementById("jpgwebglToDataUrl").style.backgroundImage = ["url(", gl.canvas.toDataURL("image/jpg"), ")"].join("");
      document.getElementById("pngwebglToDataUrl").style.backgroundImage = ["url(", gl.canvas.toDataURL("image/png"), ")"].join("");
}
</script> 
</head> 
<body onload="load()">
    <div id="jpg2dToDataUrl" style="width:300px;height:100px"></div>
    <div id="png2dToDataUrl" style="width:300px;height:100px"></div>
    <div id="jpgwebglToDataUrl" style="width:300px;height:100px"></div>
    <div id="pngwebglToDataUrl" style="width:300px;height:100px"></div>
</body> 
</html> 
