What are the real benefits of using a canvas for games?

Question

I'm currently reading on canvas, but it's hard for me to find the practical benefits of using canvas, when a lot can be done using simple css / JavaScript overlays (+ jquery lib).

This is probably because I don’t know the FULL canvas use practices.

Looking for this game: http://www.pirateslovedaisies.com/

Can someone help explain how and why canvas is used, not just CSS?

Answer 1

This is a 4k js / canvas demo that I wrote for experimenting with a 2d context ( here is a video if your browser is down). I tested it only on chrome, opera, firefox, safari and a browser for the same browser.

Please note that external resources are not loading (i.e. texture and raytraced envmap are dynamically created), so this is just one stand-alone 4096-byte HTML file.

Can you do something similar with DIVs?

But I really agree that the game you linked to IMO with can also be played with DIV; apparently there are no transformations — not even in the falling scene of the daisy loading — and the action areas for the pirates are just circles. Not sure, but it may be that even shooting occurs only at fixed angles.

Instead, Canvas could be used to:

• Drawing common oblique lines and polygons (a map can be created dynamically from a compact description or can be created randomly). Shooting can be done at any angle ...
• Procedural image creation (for example, textures or special pixel effects)
• Gradients mapping texture
• General 2d matrix transformations

Of course, a game using the image + DIVs approach is probably easier to do (lots of photoshop and simple xy animation).

Answer 2

Creating tons of HTML elements is extremely slow and hungry. The canvas object is made for graphic operations and is thus optimized for it. Also, how would you draw a curve with simple HTML / CSS ?;)

Answer 3

With <canvas> you have pixel control of what is shown on the screen. You do not need to deal with specific CSS or DOM browser support.

In addition, it is actually a pretty similar programming model for 2D non-browser games, such as those created by SDL o DirectDraw .

Answer 4

Here's a game I wrote in a few hours using Canvas; note that scaling tiles, smoothing lines is ideal. This does not apply to images that have been modified by the browser.

Click on the tiles to rotate them to make all the connections. Click the row of buttons at the top for a new board of a different size; click the line below to add a new board with different connection numbers.

The concept of the game is not mine, but only the implementation.