Canvas2DtoWebGL.js ports almost all the methods from the regular Canvas2D context of HTML5 to WebGL calls, this allows to mix 3D in your 2D Canvas and in some cases it could even improve the performance of your regular Canvas2D. It used litegl.js as the base WebGL library. To improve performance it doesn't generate garbage (reuses the same containers). It can work with non power of two textures (no mipmaps obviously).
Fully supported functions:
- translate, rotate, scale, transform, setTransform, save, restore
- clearRect
- strokeStyle, fillStyle, globalAlpha
- drawImage (not the 9 params version), you can use images or canvas (video not tested)
- beginPath, lineTo, moveTo, closePath, stroke, rect, strokeRect, fillRect, arc
- fill (limited to convex shapes)
- createPattern with images
- bezierCurveTo and quadraticCurveTo
- fillText (it creates a texture atlas with all the characters)
- lineWidth (only one mode supported)
- imageSmoothingEnabled
- getImageData and putImageData (not fully tested)
- shadows (not blurred)
Not supported (yet):
- clip
- globalCompositeOperation
- concave polygon shapes
- createLinearGradient
- drawImage using 9 parameters(img,sx,sy,swidth,sheight,x,y,width,height)
It is easy to tweak, all the parameters are publicly available inside the context (matrix, colors, etc). Textures handlers are cached inside the Image object itself, this means that reusing the same images between different Canvas2D context would have a performance penalty.
Demos are included in demo folder, you can test it here
Include the library and dependencies
<script src="js/gl-matrix-min.js"></script>
<script src="js/litegl.min.js"></script>
<script src="js/Canvas2DtoWebGL.js"></script>
Once you have your Canvas created (and before a context2D has been obtained), call this function:
var ctx = enableWebGLCanvas( mycanvas );
During your rendering you must call this two functions, it helps set the flags accordingly.
ctx.start();
//your rendering code
//...
ctx.finish();
You can write any feedback to [email protected]