What is the relationship between WebGL and HTML5?

[Augusto Sellhorn]

If I'm not mistaken, when people talk about the HTML5 canvas component we're talking more of a 2D rendering area right. Something analogous to say Java2D?

Now I see there's a push for WebGL; which seems like a separate thing, a way to have OpenGL semantics on the browser (rendering on the canvas component?).

So what's the relationship of WebGL to HTML5, or more specifically the canvas component? Is it just an extension or an integral part of canvas? One thing that is evident is that it's not fully supported in most browsers, so it doesn't seem that useful currently for cross browser game development (I'm not aware of a mobile implementation either).

[James Williams]

Augusto,

Canvas2D is an immediate mode API meaning that the browser doesn't implicitly remember what was drawn after you finished drawing.

WebGL is a 3D API based on OpenGL ES (version of OpenGL used in consoles and handheld mobile devices).

WebGL is a technology that is considered part of HTML5. It uses the Canvas tag for displaying graphics.

Re: Support, it depends on why you ask. Chrome and Firefox are well supported. Opera and Safari have a decent amount of support as well. IE is left in the code. I believe it is a good option for cross browser development if you are focusing on 3D.

So in summary:
Canvas (tag) : how Canvas2D and WebGL scenes are displayed in a web page
Canvas2D: 2D API
WebGL: 3D API

[Augusto Sellhorn]

Thanks for that response James, that clarifies a lot.

BTW, can you mix graphics drawing with Canvas2D and WebGL? For example, if I have a menu system that draws in a Canvas2D over a 3D WebGL background (actual game engine)?

Thanks!

[James Williams]

Each canvas tag has to be one or the other. You could however use an off-screen Canvas to render something in 3D and then composite it (by saving to an image) with 2D content.

[James Williams]

I forgot to mention that a WebGL canvas can be hardware accelerated whereas a Canvas2D canvas can not.