Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 81 lines (55 sloc) 2.384 kb
8553bb0 @corbanbrook project staging.
corbanbrook authored
1 WebGL-2D
2 ========
3
c13c569 @corbanbrook started webgl-2d.js and added basic example.
corbanbrook authored
4 #### HTML5 Canvas2D API in WebGL. ####
5
a04076c @corbanbrook Updating README.
corbanbrook authored
6 **Authors:**
7
8 * Corban Brook [@corban](http://twitter.com/corban)
9 * Bobby Richter [@secretrobotron](http://twitter.com/secretrobotron)
10 * Charles J. Cliffe [@ccliffe](http://twitter.com/ccliffe)
8553bb0 @corbanbrook project staging.
corbanbrook authored
11
12 This project aims to be a complete port of the Canvas2D API implemented in a WebGL context.
a04076c @corbanbrook Updating README.
corbanbrook authored
13 WebGL-2D is a proof of concept and attempts to ascertain performance improvements over Canvas2D.
14
15 It should allow _most_ Canvas2D applications to be switched to a WebGL context.
8553bb0 @corbanbrook project staging.
corbanbrook authored
16
41c39be @corbanbrook Added live demo link to README
corbanbrook authored
17 Check out a [LIVE DEMO!](http://weare.buildingsky.net/webgl-2d/example.html)
18
a1328f1 @corbanbrook Added screenshot to README
corbanbrook authored
19 ![20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg](https://img.skitch.com/20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg)
20
21
22 ### Usage ###
23
a04076c @corbanbrook Updating README.
corbanbrook authored
24 Switching your Canvas2D sketch to a WebGL2D is very simple and only requires one additional line of code:
c13c569 @corbanbrook started webgl-2d.js and added basic example.
corbanbrook authored
25
dfcb655 @corbanbrook Fixing lib to allow for multiple webgl-2d contexts at once
corbanbrook authored
26 var cvs = document.getElementById("myCanvas");
27
28 WebGL2D.enable(cvs); // adds "webgl-2d" context to cvs
29
a04076c @corbanbrook Updating README.
corbanbrook authored
30 var ctx = cvs.getContext("webgl-2d"); // easily switch between "webgl-2d" and "2d" contexts
8553bb0 @corbanbrook project staging.
corbanbrook authored
31
71922c8 @corbanbrook Updating README to show status of supported Canvas2D API.
corbanbrook authored
32 ### Supported Canvas2D Features ###
33
34 WebGL-2D is a work in progress and currently supports a very small subset of the Canvas2D API.
35
36 * strokeStyle
37 * fillStyle
cd8ad7d @corbanbrook Added strokeRect()
corbanbrook authored
38 * strokeRect
71922c8 @corbanbrook Updating README to show status of supported Canvas2D API.
corbanbrook authored
39 * fillRect
40 * translate
41 * rotate
42 * scale
f5bd869 @corbanbrook Adding save and restore to README
corbanbrook authored
43 * save
44 * restore
10fcd47 @corbanbrook 1. Updated getters and setters for fillStyle and strokeStyle
corbanbrook authored
45 * lineWidth
e0ef190 @corbanbrook Updating README to reflect function support.
corbanbrook authored
46 * drawImage
4bd668b @corbanbrook Adding new supported functions to README.
corbanbrook authored
47 * createImageData
48 * getImageData
49 * putImageData
981b39c @corbanbrook Updating supported function list.
corbanbrook authored
50 * beginPath
51 * closePath
52 * moveTo
53 * lineTo
54 * rect
4bd668b @corbanbrook Adding new supported functions to README.
corbanbrook authored
55 * fill*
56 * stroke*
57
58 *fill and stroke only work on straight line paths supported above, arc, and curves are not yet supported.
10fcd47 @corbanbrook 1. Updated getters and setters for fillStyle and strokeStyle
corbanbrook authored
59
e0ef190 @corbanbrook Updating README to reflect function support.
corbanbrook authored
60 All other properties or functions are currently stubbed. Properties are set to their defaults and functions are empty.
124a945 @corbanbrook Adding benchmarks blurb to README.
corbanbrook authored
61
62 ### Benchmarks ###
63
64 WebGL-2D should be faster than Canvas2D at certain things and slower at others.
65 It is important that you know what to expect when using WebGL-2D with your
66 project.
67
68 The benchmarks directory contains benchmarks for testing performance
69
70 **asteroidsbench/**
71
72 [Kevin Roast](http://twitter.com/kevinroast) has graciously given permission to include this benchmark in the
73 WebGL-2D project.
74
75 This benchmark is perfect for testing real world canvas usage in game engine.
76 It relies heavily on 9 arg drawImage cropping to implement scrolling
77 backgrounds and stripstrip animations.
78
79 Visit his [website](http://www.kevs3d.co.uk/) for other HTML5 canvas demos as
80 well as the [asteroids game](http://www.kevs3d.co.uk/dev/asteroids/)
Something went wrong with that request. Please try again.