See screenshot:

when scaleX =10 , scaleY=1 , the canvas 2d will transform line , but WebGL2D won't.

clearRect is missing and would be nice to have. You may have to fiddle around with the WebGL premultiplied attribs to make it work properly though.

On opening the draw image example, I see no hearts, but when I switch tabs away and back, they show up.

Occurs in Chrome 11.0.696.57

Hi,

I've added bezier support in my fork (https://github.com/nelsonsilva/webgl-2d).

I haven't submitted a pull request since I want to fix the filling of non convex polygons.
If I add each bezier as a subpath the rendering of each of these filled is not the same as filling the whole path.
If I add all to a single subpath the use of the triangle fan doesn't work properly for non convex polygons.
I have even tried to calculate the lower left of the path and use it as the first point but it still doesn't seem to work properly.
Should we add tesselation to fix this ?

The Live Demo is broken, it seems like it just renders the first frame and then it just becomes blank.

First I thought that it just were my system that had fracked up, as the desktop compositing has been disabled somehow (It did not like that I had to disconnect the secondary monitor in order to make the laptop portable for a while). But then I stumbled across this beautiful water demo, which uses WebGL. The Asteroids Demo does also work as it should.

I'm using Firefox 6.0.2 with Vimperator. I've not got Flash installed, or anything else special that I think could affect in some way, I've got the latest nVidia OpenGL drivers but I do not play much games, I use it mainly just to activate compositing.

Just a white screen is being displayed even as the data is being passed through and putImageData is called.

Currently save and restore only work on matrix operations and not style state.

add support for saving and restoring style state.

Contribution to this project seems unfortunately limited due the lack of a test suite. Are there any plans to include a definitive unit test suite?

I tried pluggin' in a couple of old stuff and it's pretty flawless! I was wondering what you guys had plan to implement / not. Like for example save(), restore(), or clearRect()???

Really awesome — saves lotsa time

^^

No matter what I do, the call to getImageData() seems to throw the awesomely vague exception "Uncaught TypeError: Type error" on line 516.

The code looks like this:

this.canvas = canvas;
if ('WebGL2D' in window) {
    console.log("WebGL-2D Enabled!");
    WebGL2D.enable(this.canvas);
    this.context = canvas.getContext("webgl-2d");
} else {
    this.context = canvas.getContext("2d");
}

this.context.drawImage(image, 0, 0, image.width, image.height);

this.image_data = this.context.getImageData(0, 0, image.width, image.height);

Your example file called "example.html" tries to link to a local copy of the mjs.js library. Unfortunately, mjs.js is not in the repo.

clip() is missing and would be useful. Implementation is hmm.. You could use the stencil buffer. Fill current path to stencil buffer, enable stencil test.

Server error when one clicks the link on the homepage.

fillStyle and strokeStyle currently only support rgb and rgba css color strings.

Add support for hex color, ie. "#990066" and color constants, ie. "orange"

arc can be done either by generating circle geometry with specified angle delta between two segments or by drawing a quad and using a fragment shader to reject pixels outside the circle (antialias by controlling opacity based on how much of a sample is inside the circle).

Hi, I'm the developer of the Isogenic Game Engine and I thought it would be cool to test webgl-2d on our engine.

I've got some questions that might lead to a bug fix here.

Please check the screenshot here: http://www.isogenicengine.com/wp-content/uploads/2011/05/webgl-2d-bug.png

The image actually displays proper graphics for about 50 milliseconds then goes into this ghosted image view. My first suspicion is that upon resizing the canvas (which Isogenic does automatically when the browser loads and when it is resized) may be causing this issue. Does webgl-2d support changing the size of the canvas AFTER the context has been set up?

If I turn off automatic resizing of the canvas to fill the browser, all I get is a big white screen where I assume the clearRect cleared the canvas but nothing is drawn after that! This may also have something to do with the issue about the hearts not being drawn in the drawImage example - in that example the canvas stays completely white as well.

The expected result (and how it looks with the '2d' context is this): http://www.isogenicengine.com/wp-content/uploads/2011/05/webgl-2d-bug2.png - That shot has auto-resize of the canvas turned off, the first DOES NOT so although you see a similar sized box, the canvas actually fills up the entire screen in the first shot, this is why I was leaning to a resize issue, like the size of the redraw area stayed the same even after resizing the canvas.

All tests run in Chrome 11.0.696.65

Any thoughts? I would be happy to investigate further and post bug fixes if I can help out!

I was trying this with the IE Fish Tank demo (see http://www.microsoft.com/taiwan/promo/ie9/bow/fish_demo/FishTank_demo.html) and I get an error:

[10:12:27.619] WebGL: bindBuffer: object from different WebGL context (or older generation of this one) passed as argument @ http://localhost:9914/webgl-2d.js:1292

in gl.drawImage...

  gl.bindBuffer(gl.ARRAY_BUFFER, rectVertexPositionBuffer);

Hello
I am trying to use webgl-2d instead of my usual canvas but I get a size problem.
I define .width and .height for resolution and .style.width and .style.height for size on screen. But with webgl-2d, the canvas is small in the bottom left corner.
Is there a specific way to give webgl-2d canvas their size ?

I tried it out for creating a rainbow (hues 0-360) and it appears to produce wrong color values for part of the hue scale.

WebGL by default does not preserve the contents of the canvas across draw calls like canvas 2d does.

To fix this you need to pass in {preserveDrawingBuffer: true} to getContext

webgl-2d contexts should support createPattern(). A context's fillStyle can be set to a pattern instance to fill draw calls.

Example:
https://developer.mozilla.org/samples/canvas-tutorial/4_11_canvas_createpattern.html

Docs:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#createPattern()

I'm curious if there is an up-to-date fork of this project, or a similar project. Seems like a great concept! But a lot of bugs exist now (maybe due to browser API changes?).

Currently drawImage only supports drawImage(img, dx, dy) and drawImage(img, dx, dy, dw, dh)

Add cropping support.