Question

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.com/

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

Answer 1

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 compact 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).