jagenjo/canvas2dtowebgl

Ports (almost) all Canvas2D functions to the GPU so it can be mixed with a WebGL canvas.

canvas2dtowebgl's Issues

globalCompositeOperation

is this now supported?

Hi, is Path2D supported?

Hi there, thanks for the library.
Is Path2D supported? https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D

Resize

Hi what an awesome project!
Maybe you can add resizing support?
I added gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); into start2d function.
Is it good idea?

performance and color?

Hi Javi,

I am trying to use this library in my project for drawing canvas.
I noticed the drawing speed is actually slower than 2d canvas. Am I doing something wrong? or this library is not suitable for my purpose?
Thank you.

RangeError: Invalid typed array length: ...

When doing some complicated polygon operations, that I can normally do with regular canvas, your webGL library spits out that error instead... any specific reason?

Additionally I run into weird issues of it not filling in paths correctly for solid fills.

Here's the repl to see what I mean: https://repl.it/@TheAlienDrew/Snowflake-Polygon-Generator-WebGL#script.js

batch draw support?

If drawImage the same Image instance，combine into one draw call.

why is webgl render slower than canvas2d in benchmark？

Does not support fonts with Cyrillic.

Hello! Your library is very convenient and supports many functions, but does not support fonts with Cyrillic or does not have the ability to change the font via ctx.font. Can this be fixed somehow?

Demo benchmarks don't show fps

... so are next to useless... :(

[disclaimer] It won't boost your app

If you got here and think it will boost your 2d context it won't. Cloning and changing render_benchmark_fillRect example to iterate over 10000 instead of 1000, 2d context handles better then using webgl. There is no dreaming 2d api to perform like gpu rendering - sad =/

// modified example from this repo
function render_benchmark_fillRect(canvas, ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < 10000; i++) {
        ctx.fillRect(500, 500, 2, 2);
    }
}

WebGL2 support

Will this ever support webgl2? I'd like to work with some gl.RGBA16UI data.

setLineDash implementation

Could you please implement the setLineDash ?

Drawing between canvases

Thanks for your cool lib!
I tried it for fun as a drop-in replacement for canvas2D just to see if we could get a performance boost on our game.
Everything worked actually really fine out of the box except for when we draw stuff between canvases (since we're using only canvas I've made some functions to apply effects to images, like brighten, darken, dissolve etc, and here we use a buffer canvas where we manipulate the pixels directly). Of course, this could (and should, if we're using webgl) converted to just use fragment shaders instead, but I was wondering if you've tried to draw a canvas on another context with your solution?

What happens is that it basically seems to cache the original image and then all other calls to our per-pixel functions that uses the same canvas only get that same image back, however we manipulate the pixel data.

I could put together a super-basic minimal example of the problem (our game is not super-basic sadly) if this is something you would be interested in.

The text rotation appears to have a bug, with extra points appearing in the transformation matrix for the rotation？

Implementing shadowblur

Hi, awesome project!
are there plans to implement the shadowblur from the canvas2d/is there any issues implementing it?

the benchmark problem

just now, i try it in windows, the all of webgl benchmark is 60fps, but in osx, it really slower than canvas, i read your code, it cache the texture but it call draw method everytime, so i check the inspector result with webgl inspector, i find drawArray too often.

the same time, i test the pixi's bunny benchmark example, i find it call drawElement method once and it has prepare module to prevent upload too many textures in one requestAnimationFrame call.

so, it case the benchmark performance bad?

createRadialGradient implementation

Can you implement the createRadialGradient?

Package managers support?

Any chance to install this as a npm / yarn dependency?

not support Chinese！

Wow, great job.
I simply tested some functions and found that the filltext() function does not support Chinese double bytes. I hope it can be repaired as soon as possible. I will use it in my game project. Please!

filltext( ‘你好中文’,50,50,50)