I'm just getting into the HTML 5 game development. I've discovered that some games seem to be created using just JS/CSS/HTML instead of the canvas.

Since canvas seems to enjoy good browser compatibility (http://caniuse.com/#feat=canvas), I'm wondering why someone wouldn't use it?

  • \$\begingroup\$ Note that XP users can't update to IE9. All 25-40% of them have to use an alternate browser to get canvas. \$\endgroup\$ – John McDonald Apr 16 '13 at 16:27

1) Lack of knowledge. Developing for Canvas might be well beyond some web developers who are very accustomed to manipulating DOM.

2) Lack of a scene graph. The DOM is (in game engine terms) a scene graph, permitting strong querying and manipulation of DOM nodes. Writing a game using Canvas requires the developer to "reinvent" that part of the wheel.

3) Lack of sprite animation. Animated GIFs or CSS style manipulation are a trade-off for writing your own sprite animation library, which developing on Canvas requires you to do.

Essentially, writing a game for Canvas requires the web developer to become a 1990s-era game developer, where there were no DirectXs or OpenGLs, and media resource management must be written by the developer. Without a lot of knowledge in this field -- especially since there has been a game development knowledge gap between when games moved from 2D to 3D and then returned back to 2D in the form of casual and smartphone games -- it becomes a daunting task.

For the rest of us who started game development in mode 21h and enjoyed evolving as DX and OpenGL evolved, Canvas is a welcome nostalgic throwback where we also happen to have rare knowledge. :-)

  • \$\begingroup\$ While all 3 points make sense, points 2 + 3 are well covered by the various frameworks out there, like EaselJS. Which really just ties back to point 1, a lack of knowledge about what options are available. \$\endgroup\$ – jhocking Apr 16 '13 at 14:09
  • \$\begingroup\$ Why do libs like Jaws and Crafty let you choose DOM based rendering? I would assume authors of such libraries are well-informed. \$\endgroup\$ – html5ver Apr 16 '13 at 14:18
  • \$\begingroup\$ I think it's mostly reason one. Few game developers know Javascript. Most of those who program web-based games usually do so in Flash, and although Flash is a dying plattform, there isn't much reason yet to switch from Flash to Javascript. \$\endgroup\$ – Philipp Apr 16 '13 at 14:27
  • \$\begingroup\$ @html5ver When these libraries were created, canvas still wasn't widely supported. And as long as there are still browsers out there which don't know canvas and maintaining these features doesn't cause unacceptable effort, there is no reason to remove this feature. \$\endgroup\$ – Philipp Apr 16 '13 at 14:31
  • \$\begingroup\$ Many developers worry about backwards compatibility. Browser games aren't like consoles... we can't afford to run on only a few limited browsers. Also, why no mention of sound? Last I checked most folks use flash for sound as it manages resources(ie: doesnt skip) as often. \$\endgroup\$ – JClaspill Apr 17 '13 at 0:02
  1. No Picking. What did the user click on? It's up to you to sort that out. HTML Elements or SVG provide that functionality out of the box.
  2. No Layout. If you intend on adding text UI, buttons, or other user interface that HTML is already good at solving you'll have to re-invent it in canvas.

Like you, I am also getting into the HTML 5 game development ;)

Initially I found canvas an exciting and viable medium. I tried to get what I wanted out of it, but It was very slow for my needs. So I turned to WebGL.

To see the difference, check the following three.js examples:

The original one shows a trotting horse and on my machine runs at 60 FPS. The canvas one though, looses the trotting animation (and only keeps the rotating animation), and runs at 30 FPS on the same machine.

And by the way, if you use three.js, you can switch between using canvas, webgl, css3d and even svg very easily. In the canvas example above, all I have changed is one line, i.e. commented out:

renderer = new THREE.WebGLRenderer();

and added:

renderer = new THREE.CanvasRenderer();
  • \$\begingroup\$ Well, 3D graphics is an entirely different story. Of course a software-renderer that renders to canvas is going to be vastly inferior to WebGL rendering. Canvas is much better suited for 2D games where you can expect decent performance. \$\endgroup\$ – bummzack Apr 17 '13 at 6:31
  • \$\begingroup\$ @bummzack, true. But exactly as WebGL brings 3D within the outreach of browser, wanting to do 3D would be one of the reasons not to use canvas. \$\endgroup\$ – Majid Fouladpour Apr 17 '13 at 6:49
  • \$\begingroup\$ Sure. Canvas would be a poor choice for 3D. The original question is more about "Why do people use DOM instead of Canvas" though. \$\endgroup\$ – bummzack Apr 17 '13 at 6:54
  • 1
    \$\begingroup\$ on my machine (that lacks a gfx card - like a lot of low end 'casual' machines, maybe) the WebGL doesn't show anything and I still can get a horse model in Canvas. So audience / market size factors in as well. \$\endgroup\$ – Mikeb Apr 17 '13 at 14:38

The main competitor to HTML5 Canvas when it comes to browser-based games is still the good, old Macromedia Adobe Flash. Most people who are in the web-based game market already have plenty of experience with Flash, and almost none with Javascript. So unless HTML5 becomes clearly more powerful than Flash, this is not going to change soon.

When you compare both tools as a pure game development plattform, Flash still seems to be superior. It has a very mature, artist-friendly authoring tool which does most of the ground-work for you, while HTML5 development is still mostly done with text editors due to lack of proper IDE support. Sure, there are some libraries which make canvas programming easier, but these are as new as canvas itself and still need time to mature.

It is, however, just a matter of time until this will change. Both Microsoft and Apple have decided that flash must die so that HTML5 can live. So I am sure that we will soon see some advanced, artist-friendly development tools for HTML5.


Not the answer you're looking for? Browse other questions tagged or ask your own question.