Drawing in HTML5

What are the options?

Canvas

The canvas element is a bitmap drawing API, and once you’ve committed to a set of pixels, you’re stuck with them.

Drawing with Canvas

What is it good for?

The canvas element is good for pixel manipulation and highly active animations.

Canvas is best suited for

Live demo time

SVG

SVG is the alternative drawing API.

It’s vector-based and does support layers.

SVG also exists in the DOM, making it easy to attach event handlers for interactivity, and it’s easier to deal with collision detection (in games, for example).

It also supports animation either through SMIL or JavaScript.

There’s an excellent JavaScript library called Raphaël that uses SVG to render images and animations.

Drawing with SVG

What is it good for?

WebGL

Very cool but hard to program. Fun demos below:

Hybrids

It’s possible to use all 3 drawing styles on a single web page.

Is it possible to draw a 3D canvas onto a 2D canvas or vice versa?

Canvas on Android.com

More info