https://github.com/greggman/webgl-canvas-2d
A minimal implementation of the canvas 2D API through WebGL
https://github.com/greggman/webgl-canvas-2d
canvas graphics html webgl
Last synced: about 1 year ago
JSON representation
A minimal implementation of the canvas 2D API through WebGL
- Host: GitHub
- URL: https://github.com/greggman/webgl-canvas-2d
- Owner: greggman
- License: mit
- Created: 2019-03-28T04:49:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-30T09:41:56.000Z (over 7 years ago)
- Last Synced: 2025-05-13T00:12:53.637Z (about 1 year ago)
- Topics: canvas, graphics, html, webgl
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# WebGL-Canvas-2D
a minimal implementation of the canvas 2D API through WebGL.
This is not intended to actually work. It's just something for fun
The only API currently supported are
```
clearRect
fillRect
drawImage
fillStyle
globalAlpha
save
restore
translate
rotate
scale
setTransform
```
For `drawImage` only `Image` is supported and the image must already be loaded
and its `src` must not change.
To use include these scripts
```
```
Then you can create a `WebGLCanvas2DRenderingContext` with
```
const ctx = new WebGLCanvas2DRenderingContext(someCanvas);
```
Note that it does not handle canvas resize automatically. To resize you have 2 options.
(a) call `canvas.resize`
Example
```
if (canvas.resize) {
canvas.resize(newWidth, newHeight);
} else {
canvas.width = newWidth;
canvas.height = newHeight;
```
(b) call `ctx.updateSize`
```
canvas.width = newWidth;
canvas.height = newHeight;
ctx.updateSize();
```
You can also use the shim which makes it create `WebGLCanvas2DRenderingContext`s automatically.
Of course that means you can't create a normal 2D context, only this limited context.
```
const ctx = someCanvas.getContext('2d'); // this is a WebGLCanvas2DRenderingContext
```