Skip to content
This repository
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 74 lines (59 sloc) 2.02 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
<!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;

      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.fillStyle = "rgb(50, 0, 50)";
        ctx.fillRect(0, 0, width, height);

        ctx.save();
          ctx.translate(width/2, height/2);
          ctx.rotate(frameCount/100);
          ctx.save();
            ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
            for (var i = 0; i < 50; i++) {
              ctx.scale(2,2);
              ctx.fillRect(0, 0, 50, 50);
              ctx.scale(.5, .5);
              ctx.rotate(-2*Math.PI/50);
            }
          ctx.restore();
        ctx.restore();
      }
    </script>

    <style type="text/css">
      body, * {
        font-family: sans-serif;
      }
    </style>
  
  </head>
  
  <body>
    <h1>Example: WebGL-2D Comparison</h1>
    <h2>fillRect</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>
Something went wrong with that request. Please try again.