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

This is probably because I don't know the FULL practicalities of using canvas.

Looking at this game: /

Could someone help explain how and why canvas is being used as opposed to just css?

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

This is probably because I don't know the FULL practicalities of using canvas.

Looking at this game: http://www.pirateslovedaisies./

Could someone help explain how and why canvas is being used as opposed to just css?

• javascript
• css
• html
• canvas

• Amazing game! I've just played one round :D – vz0 Commented Jan 24, 2011 at 22:31
• This may be useful - visitmix./labs/ai2canvas – bcm Commented Jan 24, 2011 at 23:05

4 Answers 4

This is a 4k js/canvas demo I wrote to experiment with the 2d context (here is a video if your browser doesn't work). I tested it only on chrome, opera, firefox, safari and nexus one browser.

Note that no external resources are loaded (i.e. the texture and the raytraced envmap are built dynamically), so this is just a single self-contained 4096 bytes HTML file.

You can do something like that with DIVs?

But indeed I agree that the game you linked IMO could be done also with DIVs; apparently there are no transformations - not even in the falling daisy loading scene - and the action areas for the pirates are just circles. Not sure but could be that even shooting only happens at fixed angles.

Canvas could have been used instead for:

• Drawing general sloped lines and polygons (the map could be created dinamically from a pact description or could have been generated randomly). Shooting could be done at any angle...
• Procedural image creation (e.g. textures or special pixel effects)
• Gradients, texture mapping
• General 2d matrix transforms

Of course a game using an image+DIVs approach is probably way easier to make (a lot of photoshop and simple xy animation).

Creating tons of HTML elements is extremely slow and memory-hungry. The canvas object is made for graphics operations and thus optimized for it. Besides that.. how would you draw a curve with plain HTML/CSS? ;)

Using <canvas> you have a per-pixel control of what's shown on the screen. You don't have to deal with specific browser CSS or DOM patibility.

Also, that's actually a pretty similar programming model to 2D non-browser games, like those created using SDL o DirectDraw.

Here's a game I wrote in a few hours using Canvas; note that the scaling of the tiles, the anti-aliasing of the lines, is perfect. This would not be the case with image tiles that were being resized by the browser.

Click the tiles to rotate them in an attempt to make all connections. Click the row of buttons at the top for a new board of a different size; click the row of buttons below that for a new board with different numbers of connections.

The game concept is not mine, only the implementation.