Forums » Everything else » Canvas and WebGL

I've noticed remarks and demos here and there about the possibilities of WebGL, applicable to 2D browser games. And yet, I thought the purpose of the <canvas> element was to be the king of rendering in 2D (i.e. the most efficient).

I've heard that although WebGL is faster and smoother at the moment (as with X-Type), the canvas will surpass it in the long run. Is this the case?

Where are these two technologies heading? And what can we foreseeably plan for while making our games today?

WebGL runs in the canvas element.

So most time people are talking about canvas, they mean the 2d context, cause WebGL still isn't really there. But that will change soon.

It's hard to tell which will win in the end.

What is certain is that the canvas is a standard, and implemented theoretically as such, in all the current 'stable' versions of the big name browsers - IE9, FF8, Chrome (14?), Safari 5, Opera 12 - and all can use canvas implementations.

WebGL is not as standard, though. Some browsers implement it, some don't, and there are considered to be security concerns about using it. Basically, in modern apps, the memory of a given app's process is theoretically supposed to be inviolate from other apps, but WebGL works on a different context, using the graphics card to optimise things, and that's much more 'open season', and I believe proofs of concept were shown to be able to grab WebGL content from outside the browser. While for a lot of things that might not be too problematic, it might be if general operations of display (like handling usernames and passwords, say) were optimised too.

That is, at least, the risk as I understand it. But as far as I'm concerned, technologies like WebGL are of little practical use to me until they're more widely deployed, but in time it's likely it will be.

For things we make today, canvas is certainly more widely supported, and more portable; a canvas game works well across the current stable versions of browsers - and it tends to work acceptably well for mobile browsers too, though usually tweaking and consideration is given to them for more limited processing capability. It's also not that hard to create 'native' apps out of canvas projects, through iOSImpact and appMobi XDK, and I don't know how true that will remain with WebGL.

It all depends, really, on how trailblazing you can afford to be, and how comfortable you are with it; the more things you depend on, the fewer people will be able to play your game.

Thanks for your thoughts on this, I really appreciate it. Apologies for delay (I'm bad at following up once I get my answers). Cheerio!

Heh, no worries.

Actually, to be honest, canvas vs WebGL is really the least of our problems from a game-in-browser perspective, the fact that web audio is still such a mess to implement (even with the newer Web Audio API facilities) due to politics from the browser makers etc. is a much bigger concern.

Good point. There are several aspects of the HTML5 game realm I'd like to ask about. This section seems like a good place to do it.

Arantor, I've seen you a lot around here lately. Just curious, would you tell me what is your background? Can you say what kind of game project you're working on?

Yeah, this is a pretty good place to talk about HTML5 and all its little foibles since they all relate to Impact in some fashion, I guess.

As for me... I'm an enthusiastic beginner, I'd say. I have bits of projects on the go, more using Impact to do rapid prototyping of things - I don't have a single specific game that's even close to 'done', I've got two publicly-accessible WIP games, one is playable but needs polish, the other is horribly broken and was more to get a feel for the level editor and to explain the basics of using maps to a colleague who is also looking at (and has purchased) Impact.

What I find is that by reading the sorts of things that go on here and sometimes going away to find answers means I get to see the engine in ways I might not have thought of using it otherwise, something like broadening my horizons.

My background, more generally, is programming for the web (especially with the SMF and Wedge forum systems) though I'm hoping in 2012 to get a few games published via the App Store for Apple devices; I don't really see how you can effectively monetise HTML5 games on the web, sadly, except through some kind of subscription system.

On a semi related note, one thing I did build that is still a bit fragile but that I might share is a tool I built for collaboration purposes; I needed to be able to show my colleague the raw sources for an Impact game and still have it accessible for both of us (since we're in different locations), so I wrote a layer that hooks into the SMF forum/chat facility we have and won't allow any access to any of the resources unless you're authenticated with the forum, which means I can put the Impact files in their raw form because it's not accessible to the web at large but only me and him at the present time.

It's hideously inefficient, since it just grabs any .js or .png request in the relevant folder, pushes it through the filter file, which loads half the forum for authentication. But for now it's adequate until I can put something better together (and yes, I did hack that support into the level editor too, so not even the Weltmeister API can be accessed without authentication)

speaking of politics i think MS is still not supporting webGL because of their whole separate 3D APIs..

also webGL is, like openGL a spec that can be optimized on hardware, whereas i think the canvas API is something that is just a 2D graphics API that has grown over time. this is why using openGL even for a 2D game gives good performance...

Knowing MS' history, I doubt it's entirely because of the APIs, it wouldn't be that hard to hook WebGL up to DX, or even hook it up to OpenGL and use the existing technologies to bridge OpenGL to DX.

There are valid security concerns that have been demonstrated for WebGL-optimised setups, though, which is why either Firefox or Opera pulled it (and I'm not sure if they redeployed it or not)

Canvas and OpenGL and WebGL are all specs, the difference is who has responsibility for implementing them; OpenGL and to a lesser degree WebGL are more dependent on the graphics hardware supporting them, while Canvas is currently software only - but I expect that to change in the future since Canvas occupies a space that WebGL doesn't properly address at this time.