Basic HTML5 Canvas

HTML5 Canvas

CANVAS is a bitmap-based rendering surface in browsers. Pixels in, pixels out. By comparison, SVG (Scalable Vector Graphics) is vector-based and treats elements as DOM objects (thus, they have behaviors and properties).

CANVAS good for speed, rendering perf, fixed-size (API based)

SVG good for interaction (document based)

WebGL is the new kid on the block. Good in the future for replacing Canvas in more complex scenarios.

Canvas in Action

YOUR BROWSER DOES NOT SUPPORT CANVAS