examples/strokeRect.html

<!DOCTYPE html>
<html>
  <head>
    <title>WebGL-2D Example</title>
  
    <script src="../webgl-2d.js" type="text/javascript"></script>
  
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", init, false);

      var cvs2D, cvsGL, ctx2D, ctxGL, width, height;
      var frameCount = 0;
      var img = new Image();
      img.src = "images/spin0000.png";
      var img2 = new Image();
      img2.src = "images/spin0015.png";

      function init() {
        cvs2D = document.getElementById("canvas2D");
        cvsGL = document.getElementById("canvasGL");

        width = cvs2D.width, height = cvs2D.height;

        WebGL2D.enable(cvsGL); // adds new context "webgl-2d" to cvs

        // Easily switch between regular canvas 2d context and webgl-2d
        ctx2D = cvs2D.getContext("2d");
        ctxGL = cvsGL.getContext("webgl-2d");

        draw(ctx2D);
        draw(ctxGL);

        // Enable animation
        //setInterval(function() { frameCount++; draw(ctxGL); draw(ctx2D); }, 1000/30);
      }

      function draw(ctx) {
        ctx.lineWidth = 1;
        ctx.strokeStyle = "rgba(255, 50, 255, 0.5)";
        ctx.fillStyle = "rgb(50, 0, 50)";
        ctx.fillRect(0, 0, width, height);
        ctx.translate(width/2, height/2);
        ctx.save();
          ctx.save();
            ctx.strokeStyle = "rgb(50, 255, 255)";
            for (var i = 0; i < 50; i++) {
              ctx.scale(2,2);
              ctx.strokeRect(0, 0, 50, 50);
              ctx.scale(.5, .5);
              ctx.rotate(-2*Math.PI/50);
            }
          ctx.restore();
        ctx.translate(-150, -150);
        ctx.strokeRect(0, 0, 300, 300);
        ctx.restore();
      }
    </script>

    <style type="text/css">
      body, * {
        font-family: sans-serif;
      }
    </style>
  
  </head>
  
  <body>
    <h1>Example: WebGL-2D Comparison</h1>
    <h2>strokeRect</h2>
    <div style="float: left; margin-right: 10px;">
      <h2>WebGL-2D</h2> 
      <canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>
    </div>
    <div style="float: left;">
      <h2>Canvas2D</h2>
      <canvas id="canvas2D" width="350" height="350" style="border: 1px solid black;"></canvas>
    </div>
  </body>
</html>