https://github.com/jagenjo/canvas2dtowebgl
Ports (almost) all Canvas2D functions to the GPU so it can be mixed with a WebGL canvas.
https://github.com/jagenjo/canvas2dtowebgl
canvas canvas2d canvas2d-functions canvasrenderingcontext2d javascript webgl
Last synced: 3 months ago
JSON representation
Ports (almost) all Canvas2D functions to the GPU so it can be mixed with a WebGL canvas.
- Host: GitHub
- URL: https://github.com/jagenjo/canvas2dtowebgl
- Owner: jagenjo
- License: mit
- Created: 2014-09-26T10:37:54.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-11-08T16:39:24.000Z (almost 4 years ago)
- Last Synced: 2024-04-14T18:35:46.682Z (over 1 year ago)
- Topics: canvas, canvas2d, canvas2d-functions, canvasrenderingcontext2d, javascript, webgl
- Language: JavaScript
- Homepage:
- Size: 309 KB
- Stars: 300
- Watchers: 15
- Forks: 55
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Canvas2DtoWebGL.js
==================
Canvas2DtoWebGL.js ports almost all the methods from the regular Canvas2D context (CanvasRenderingContext2D) of HTML5 to WebGL calls, this allows to mix 3D in your 2D Canvas or the opposite (to create GUIs, debug info, etc), and *in some cases* it could even improve the performance of your regular Canvas2D (when working with big images).
It uses [litegl.js](https://github.com/jagenjo/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 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)
* createLinearGradient
* clip
Not supported (yet):
* globalCompositeOperation
* concave polygon shapes
Won't be supported:
* Blurred shadows
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.
Extra features
---------------------
It not only provide the Canvas2D functions, it also comes with some extra ones that you can call directly to speed up some processes (like setting colors, modifying the matrix) or even creating some FX that would be hard in a regular Canvas (applying a shader to an image, colorizing an image).
Demos & Benchmark
-----------------
Demos are included in demo folder, you can [test it here](http://tamats.com/projects/canvas2DtoWebGL/demo)
Usage
-----
Include the library and dependencies
```html
```
Once you have your Canvas created (and before a CanvasRenderingContext2D has been obtained), call this function:
```js
var ctx = enableWebGLCanvas( mycanvas );
```
During your rendering you must call this two functions, it helps set the flags accordingly.
```js
ctx.start2D();
//your rendering code
//...
ctx.finish2D();
```
Feedback
--------
You can write any feedback to javi.agenjo@gmail.com