Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

started webgl-2d.js and added basic example.

  • Loading branch information...
commit c13c569d1c184ee750ee36f89cf8e4967eeeebb5 1 parent 8553bb0
@corbanbrook corbanbrook authored
Showing with 120 additions and 1 deletion.
  1. +20 −0 LICENSE
  2. +8 −1 README.md
  3. +28 −0 example.html
  4. +64 −0 webgl-2d.js
View
20 LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2010 Corban Brook
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
9 README.md
@@ -1,10 +1,17 @@
WebGL-2D
========
-HTML5 Canvas2D API in WebGL.
+#### HTML5 Canvas2D API in WebGL. ####
+
+**Author:** Corban Brook [@corban](http://twitter.com/corban)
This project aims to be a complete port of the Canvas2D API implemented in a WebGL context.
It should allow _most_ Canvas2D applications to be switched to a WebGL context simply by including
this lib and running a small initialization stub.
+Switching your Canvas2D sketch to a WebGL2D sketch is very simple and only requires one line of code to change:
+
+ var cvs = document.getElementById("canvas1");
+ // var ctx = cvs.getContext("2d"); now becomes ...
+ var ctx = new WebGL2D(cvs);
View
28 example.html
@@ -0,0 +1,28 @@
+<!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 cvs, ctx;
+
+ function init() {
+ cvs = document.getElementById("canvas1");
+ //ctx = cvs.getContext("2d");
+ ctx = new WebGL2D(cvs);
+
+ ctx.fillStyle = "rgba(1.0, 0, 0, 1.0)";
+ ctx.fillRect(0, 0, cvs.width, cvs.height);
+ }
+ </script>
+
+ </head>
+
+ <body>
+ <canvas id="canvas1">
+ </body>
+</html>
View
64 webgl-2d.js
@@ -0,0 +1,64 @@
+/**
+ * WebGL-2D.js - HTML5 Canvas2D API in a WebGL context
+ *
+ * Created by Corban Brook <corbanbrook@gmail.com> on 2011-03-02.
+ *
+ */
+
+/*
+ * Copyright (c) 2011 Corban Brook
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+(function(undefined) {
+
+ var ctx;
+
+ var WebGL2D = this.WebGL2D = function WebGL2D(canvas) {
+ ctx = canvas.getContext("experimental-webgl");
+
+ return ctx;
+ };
+
+ var webgl = WebGLRenderingContext.prototype;
+
+ function colorStringToArray(colorString) {
+ return colorString.replace(/[^\d.,]/g, "").split(",");
+ }
+
+ Object.defineProperty(webgl, "fillStyle", {
+ set: function(value) {
+ ctx.clearColor.apply(this, colorStringToArray(value));
+ }
+ });
+
+ Object.defineProperty(webgl, "strokeStyle", {
+ set: function(value) {
+ alert(value);
+ }
+ });
+
+ webgl.fillRect = function fillRect(x, y, width, height) {
+ ctx.clear(16640);
+ };
+
+}());
Please sign in to comment.
Something went wrong with that request. Please try again.