Some Demos

• Liquid Characters
• Canvas + Video
• Another World JS

Slides

• PDF (688 KB)

Code Examples

1. Basic Canvas setup (squares) [.js]
2. Primitive Shapes (circles) [.js]
3. Primitive Shapes (bezier, lines, etc.) [.js]
4. Transforms (moveTo) [.js]
5. Transforms (translate) [.js]
6. Transforms (moveTo + translate) [.js]
7. Transforms (save + restore) [.js]
8. Transforms (rotate) [.js]
9. Transforms (scale) [.js]
10. Transforms (scale corrected) [.js]
11. Compositing + Animation [.js]
12. Animation + Interaction [.js]
13. Parallax Animation + Interaction [.js]

Resources

• RaphaelJS
• Processing.js
• Canvas Tutorial (by Mozilla Dev. Center)
• Dive Into HTML5 - Canvas
• canvasdemos.com
• RGraph Library
• Canvas Cheat Sheet
• GUIMark 2 - HTML5 vs. Flash benchmarks