Authors:

• Corban Brook @corban
• Bobby Richter @secretrobotron
• Charles J. Cliffe @ccliffe

This project aims to be a complete port of the Canvas2D API implemented in a WebGL context. WebGL-2D is a proof of concept and attempts to ascertain performance improvements over Canvas2D.

It should allow most Canvas2D applications to be switched to a WebGL context.

Check out a LIVE DEMO!

Switching your Canvas2D sketch to a WebGL2D is very simple and only requires one additional line of code:

var cvs = document.getElementById("myCanvas");

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

var ctx = cvs.getContext("webgl-2d"); // easily switch between "webgl-2d" and "2d" contexts

WebGL-2D is a work in progress and currently supports a very small subset of the Canvas2D API.

• strokeStyle
• fillStyle
• strokeRect
• fillRect
• translate
• rotate
• scale
• save
• restore
• lineWidth
• drawImage
• beginPath
• closePath
• moveTo
• lineTo
• rect
• createImageData
• getImageData
• putImageData

All other properties or functions are currently stubbed. Properties are set to their defaults and functions are empty.

WebGL-2D should be faster than Canvas2D at certain things and slower at others. It is important that you know what to expect when using WebGL-2D with your project.

The benchmarks directory contains benchmarks for testing performance

asteroidsbench/

Kevin Roast has graciously given permission to include this benchmark in the WebGL-2D project.

This benchmark is perfect for testing real world canvas usage in game engine. It relies heavily on 9 arg drawImage cropping to implement scrolling backgrounds and stripstrip animations.

Visit his website for other HTML5 canvas demos as well as the asteroids game