ctx.createPattern() for fillRect (draft version)

README.md

@@ -14,8 +14,6 @@ WebGL-2D is a proof of concept and attempts to ascertain performance improvement
 
 It should allow _most_ Canvas2D applications to be switched to a WebGL context.
 
-Check out a [LIVE DEMO!](http://weare.buildingsky.net/webgl-2d/example.html)
-
 ![20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg](https://img.skitch.com/20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg)
 
 

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "webgl-2d",
+  "main": "webgl-2d.js",
+  "homepage": "https://github.com/lekzd/webgl-2d",
+  "authors": [
+    "gameclosure"
+  ],
+  "description": "Use WebGl features as HTML5 Canvas api",
+  "moduleType": [],
+  "keywords": [
+    "WebGl"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "benchmarks",
+    "examples",
+    "support",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

examples/animation.html

@@ -0,0 +1,59 @@
+<h3>Canvas2D</h3>
+<canvas id="canvas-default"></canvas>
+<h3>Webgl-2d</h3>
+<canvas id="canvas-webgl"></canvas>
+<script src="../webgl-2d.js"></script>
+<script>
+var width = 600,
+    height = 200;
+
+var canvasDefault = document.getElementById("canvas-default");
+canvasDefault.width = width;
+canvasDefault.height = height;
+
+var canvasWebgl = document.getElementById("canvas-webgl");
+canvasWebgl.width = width;
+canvasWebgl.height = height;
+
+WebGL2D.enable(canvasWebgl)
+var ctx = canvasDefault.getContext("2d");
+var webgl = canvasWebgl.getContext("webgl-2d");
+
+var t = 0; 
+function render() {
+  t++;
+  var j = 10;
+  while (--j > 0) { 
+    var i = 20;
+    while (--i > 0) {
+      var color = "hsl(" + (360/i+t) + "," + (100/j) + "%," + (60-j)+ "%)";
+      ctx.fillStyle = color;
+      webgl.fillStyle = color;
+      ctx.fillRect(30*(i-1),20*(j-1),20,15);
+      webgl.fillRect(30*(i-1),20*(j-1),20,15);
+    }
+  }
+}
+
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          window.oRequestAnimationFrame      ||
+          window.msRequestAnimationFrame     ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+
+// usage: 
+// instead of setInterval(render, 16) ....
+
+(function animloop(){
+  requestAnimFrame(animloop);
+  render();
+})();
+
+</script>

examples/animationTransparency.html

@@ -0,0 +1,61 @@
+<h3>Canvas2D</h3>
+<canvas id="canvas-default"></canvas>
+<h3>Webgl-2d</h3>
+<canvas id="canvas-webgl"></canvas>
+<script src="../webgl-2d.js"></script>
+<script>
+var width = 600,
+    height = 200;
+
+var canvasDefault = document.getElementById("canvas-default");
+canvasDefault.width = width;
+canvasDefault.height = height;
+
+var canvasWebgl = document.getElementById("canvas-webgl");
+canvasWebgl.width = width;
+canvasWebgl.height = height;
+
+WebGL2D.enable(canvasWebgl)
+var ctx = canvasDefault.getContext("2d");
+var webgl = canvasWebgl.getContext("webgl-2d");
+
+var t = 0; 
+function render() {
+  t++;
+  var j = 10;
+  ctx.clearRect(0,0,width,height);
+  webgl.clearRect(0,0,width,height);
+  while (--j > 0) { 
+    var i = 20;
+    while (--i > 0) {
+      var color = "hsla(" + (360/i+t) + "," + (100/j) + "%," + (60-j)+ "%,0.6)";
+      ctx.fillStyle = color;
+      webgl.fillStyle = color;
+      ctx.fillRect(30*(i-1),20*(j-1),20,15);
+      webgl.fillRect(30*(i-1),20*(j-1),20,15);
+    }
+  }
+}
+
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          window.oRequestAnimationFrame      ||
+          window.msRequestAnimationFrame     ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+
+// usage: 
+// instead of setInterval(render, 16) ....
+
+(function animloop(){
+  requestAnimFrame(animloop);
+  render();
+})();
+
+</script>

examples/createPattern.html

@@ -0,0 +1,63 @@
+<!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";
+
+      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");
+
+        img.onload = function() {
+          draw(ctxGL);
+          draw(ctx2D);
+        };
+      }
+
+      function draw(ctx) {
+        requestAnimationFrame(draw.bind(this, ctx));
+        ctx.clearRect(0, 0, width, height);
+        var pattern = ctx.createPattern(img, 'repeat');
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 10, 150, 110);
+      }
+    </script>
+
+    <style type="text/css">
+      body, * {
+        font-family: sans-serif;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <h1>Example: WebGL-2D Comparison</h1>
+    <h2>drawImage</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>

examples/hslPalette.html

@@ -0,0 +1,35 @@
+<h3>Canvas2D</h3>
+<canvas id="canvas-default"></canvas>
+<h3>Webgl-2d</h3>
+<canvas id="canvas-webgl"></canvas>
+<script src="../webgl-2d.js"></script>
+<script>
+var width = 600,
+    height = 200;
+
+var canvasDefault = document.getElementById("canvas-default");
+canvasDefault.width = width;
+canvasDefault.height = height;
+
+var canvasWebgl = document.getElementById("canvas-webgl");
+canvasWebgl.width = width;
+canvasWebgl.height = height;
+
+WebGL2D.enable(canvasWebgl)
+var ctx = canvasDefault.getContext("2d");
+var webgl = canvasWebgl.getContext("webgl-2d");
+
+
+var j = 10;
+while (--j > 0) { 
+  var i = 20;
+  while (--i > 0) {
+    var color = "hsl(" + (360/i) + "," + (100/j) + "%,50%)";
+    ctx.fillStyle = color;
+    webgl.fillStyle = color;
+    ctx.fillRect(30*(i-1),20*(j-1),20,15);
+    webgl.fillRect(30*(i-1),20*(j-1),20,15);
+  }
+}
+
+</script>

examples/hslaPalette.html

@@ -0,0 +1,43 @@
+<h3>Canvas2D</h3>
+<canvas id="canvas-default"></canvas>
+<h3>Webgl-2d</h3>
+<canvas id="canvas-webgl"></canvas>
+<script src="../webgl-2d.js"></script>
+<script>
+var width = 600,
+    height = 200;
+
+var canvasDefault = document.getElementById("canvas-default");
+canvasDefault.width = width;
+canvasDefault.height = height;
+
+var canvasWebgl = document.getElementById("canvas-webgl");
+canvasWebgl.width = width;
+canvasWebgl.height = height;
+
+WebGL2D.enable(canvasWebgl)
+var ctx = canvasDefault.getContext("2d");
+var webgl = canvasWebgl.getContext("webgl-2d");
+
+
+var j = 10;
+while (--j > 0) { 
+  var i = 20;
+  while (--i > 0) {
+    var color = "hsla(" + (360/i) + "," + (100/j) + "%," + (60-j)+ "%,0.3)";
+    ctx.lineWidth = 10;
+    webgl.lineWidth = 10;
+    ctx.strokeStyle = color;
+    webgl.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(30*(i-1),20*(j-1));
+    ctx.lineTo(30*(i-1)+20,20*(j-1)+15);
+    ctx.stroke();
+    webgl.beginPath();
+    webgl.moveTo(30*(i-1),20*(j-1))
+    webgl.lineTo(30*(i-1)+20,20*(j-1)+15)
+    webgl.stroke();
+  }
+}
+
+</script>

examples/rgbaPalette.html

@@ -0,0 +1,35 @@
+<h3>Canvas2D</h3>
+<canvas id="canvas-default"></canvas>
+<h3>Webgl-2d</h3>
+<canvas id="canvas-webgl"></canvas>
+<script src="../webgl-2d.js"></script>
+<script>
+var width = 600,
+    height = 200;
+
+var canvasDefault = document.getElementById("canvas-default");
+canvasDefault.width = width;
+canvasDefault.height = height;
+
+var canvasWebgl = document.getElementById("canvas-webgl");
+canvasWebgl.width = width;
+canvasWebgl.height = height;
+
+WebGL2D.enable(canvasWebgl)
+var ctx = canvasDefault.getContext("2d");
+var webgl = canvasWebgl.getContext("webgl-2d");
+
+
+var j = 10;
+while (--j > 0) { 
+  var i = 20;
+  while (--i > 0) {
+    var color = "rgba(" + Math.round(255/i) + "," + Math.round(255/j) + ",0,0.6)";
+    ctx.fillStyle = color;
+    webgl.fillStyle = color;
+    ctx.fillRect(30*(i-1),20*(j-1),20,15);
+    webgl.fillRect(30*(i-1),20*(j-1),20,15);
+  }
+}
+
+</script>