HTML Canvas Deep Dive

Table of Contents

1. 1 HTML Canvas Deep Dive

2. 2 Basic Drawing

• Overview
• What is Canvas?
• So where does it fit in with the rest of the web?
• Which? What? When?
• Browser Support
• Simple Drawing
• Paths
• Coordinate System
• Images
• Text
• Gradients

3. 3 Hands On: Making Charts

• Create A New Page
• Add Data
• Axis Lines and Labels
• Piechart
• Add Some Gradients

4. 4 Advanced Drawing and Events

• Image Fills
• Opacity
• Transforms
• State Saving
• Clipping
• Events

5. 5 Animation

• Animating with requestAnimationFrame
• Clearing the background
• Particle Simulator
• Sprite Animation

6. 6 Making a Game

• Draw the spaceship with an Image Sprite
• Sprite Animation for Bullets and Bombs
• Procedural Graphics for Aliens
• Particle Simulator for Explosions

7. 7 Pixel Buffers and Other Effects

• Generative Textures
• Add Noise
• Photo Inversion
• Desaturation
• Composite Modes
• Shadow Effects

8. 8 3D Graphics with WebGL and ThreeJS

• Overview
• Examples
• Browser Support
• A ThreeJS Template
• Customizing the Template
• Shader Effects
• A Few More Details

9. 9 WebGL Hands On with ThreeJS: 3D Car

• Building A Sky
• Adding a Ground Plane
• Adding a Car Model
• Keyboard Control
• Next Steps

10. 10 Intro to WebAudio

• Overview
• Audio Element vs WebAudio
• Simple playback
• WebAudio Nodes
• Sound Effects
• Audio Visualization
• Drawing the Frequencies
• Next Steps

11. 11 WebCam Access with getUserMedia()

• getUserMedia
• Taking a snapshot
• More Cool Hacks

12. 12 Real World Examples and Tools

• Graphs and Charts
• Game Engines
• Drawing Programs
• Custom Fonts
• Tools and Libraries
• Visual Tools

13. 13 Mobile Devices and Performance Optimization

• Draw Less

14. 14 Next Steps