Contents
Preface
Acknowledgments
About the Author
Chapter 1: Essentials
1.1 The canvas Element
1.1.1 Canvas Element Size vs. Drawing Surface Size
1.1.2 The Canvas API
1.2 Canvas Contexts
1.2.1 The 2d Context
1.2.2 Saving and Restoring Canvas State
1.3 Canonical Examples in This Book
1.4 Getting Started
1.4.1 Specifications
1.4.2 Browsers
1.4.3 Consoles and Debuggers
1.4.4 Performance
1.5 Fundamental Drawing Operations
1.6 Event Handling
1.6.1 Mouse Events
1.6.2 Keyboard Events
1.6.3 Touch Events
1.7 Saving and Restoring the Drawing Surface
1.8 Using HTML Elements in a Canvas
1.8.1 Invisible HTML Elements
1.9 Printing a Canvas
1.10 Offscreen Canvases
1.11 A Brief Math Primer
1.11.1 Solving Algebraic Equations
1.11.2 Trigonometry
1.11.3 Vectors
1.11.4 Deriving Equations from Units of Measure
1.12 Conclusion
Chapter 2: Drawing
2.1 The Coordinate System
2.2 The Drawing Model
2.3 Drawing Rectangles
2.4 Colors and Transparency
2.5 Gradients and Patterns
2.5.1 Gradients
2.5.2 Patterns
2.6 Shadows
2.6.1 Inset Shadows
2.7 Paths, Stroking, and Filling
2.7.1 Paths and Subpaths
2.7.2 Cutouts
2.8 Lines
2.8.1 Lines and Pixel Boundaries
2.8.2 Drawing a Grid
2.8.3 Drawing Axes
2.8.4 Rubberband Lines
2.8.5 Drawing Dashed Lines
2.8.6 Drawing Dashed Lines by Extending CanvasRenderingContext2D
2.8.7 Line Caps and Joins
2.9 Arcs and Circles
2.9.1 The arc() Method
2.9.2 Rubberband Circles
2.9.3 The arcTo() Method
2.9.4 Dials and Gauges
2.10 Bรฉzier Curves
2.10.1 Quadratic Curves
2.10.2 Cubic Curves
2.11 Polygons
2.11.1 Polygon Objects
2.12 Advanced Path Manipulation
2.12.1 Dragging Polygons
2.12.2 Editing Bรฉzier Curves
2.12.3 Scrolling Paths into View
2.13 Transformations
2.13.1 Translating, Scaling, and Rotating
2.13.2 Custom Transformations
2.14 Compositing
2.14.1 The Compositing Controversy
2.15 The Clipping Region
2.15.1 Erasing with the Clipping Region
2.15.2 Telescoping with the Clipping Region
2.16 Conclusion
Chapter 3: Text
3.1 Stroking and Filling Text
3.2 Setting Font Properties
3.3 Positioning Text
3.3.1 Horizontal and Vertical Positioning
3.3.2 Centering Text
3.3.3 Measuring Text
3.3.4 Labeling Axes
3.3.5 Labeling Dials
3.3.6 Drawing Text around an Arc
3.4 Implementing Text Controls
3.4.1 A Text Cursor
3.4.2 Editing a Line of Text in a Canvas
3.4.3 Paragraphs
3.5 Conclusion
Chapter 4: Images and Video
4.1 Drawing Images
4.1.1 Drawing an Image into a Canvas
4.1.2 The drawImage() Method
4.2 Scaling Images
4.2.1 Drawing Images outside Canvas Boundaries
4.3 Drawing a Canvas into a Canvas
4.4 Offscreen Canvases
4.5 Manipulating Images
4.5.1 Accessing Image Data
4.5.2 Modifying Image Data
4.6 Clipping Images
4.7 Animating Images
4.7.1 Animating with an Offscreen Canvas
4.8 Security
4.9 Performance
4.9.1 drawImage(HTMLImage) vs. drawImage(HTMLCanvas) vs. putImageData()
4.9.2 Drawing a Canvas vs. Drawing an Image, into a Canvas; Scaled vs. Unscaled
4.9.3 Looping over Image Data
4.10 A Magnifying Glass
4.10.1 Using an Offscreen Canvas
4.10.2 Accepting Dropped Images from the File System
4.11 Video Processing
4.11.1 Video Formats
4.11.2 Playing Video in a Canvas
4.11.3 Processing Videos
4.12 Conclusion
Chapter 5: Animation
5.1 The Animation Loop
5.1.1 The requestAnimationFrame() Method: Letting the Browser Set the Frame Rate
5.1.2 Internet Explorer
5.1.3 A Portable Animation Loop
5.2 Calculating Frame Rates
5.3 Scheduling Tasks at Alternate Frame Rates
5.4 Restoring the Background
5.4.1 Clipping
5.4.2 Blitting
5.5 Double Buffering
5.6 Time-Based Motion
5.7 Scrolling the Background
5.8 Parallax
5.9 User Gestures
5.10 Timed Animations
5.10.1 Stopwatches
5.10.2 Animation Timers
5.11 Animation Best Practices
5.12 Conclusion
Chapter 6: Sprites
6.1 Sprites Overview
6.2 Painters
6.2.1 Stroke and Fill Painters
6.2.2 Image Painters
6.2.3 Sprite Sheet Painters
6.3 Sprite Behaviors
6.3.1 Combining Behaviors
6.3.2 Timed Behaviors
6.4 Sprite Animators
6.5 A Sprite-Based Animation Loop
6.6 Conclusion
Chapter 7: Physics
7.1 Gravity
7.1.1 Falling
7.1.2 Projectile Trajectories
7.1.3 Pendulums
7.2 Warping Time
7.3 Time-Warp Functions
7.4 Warping Motion
7.4.1 Linear Motion: No Acceleration
7.4.2 Ease In: Gradually Accelerate
7.4.3 Ease Out: Gradually Decelerate
7.4.4 Ease In, Then Ease Out
7.4.5 Elasticity and Bouncing
7.5 Warping Animation
7.6 Conclusion
Chapter 8: Collision Detection
8.1 Bounding Areas
8.1.1 Rectangular Bounding Areas
8.1.2 Circular Bounding Areas
8.2 Bouncing Off Walls
8.3 Ray Casting
8.3.1 Fine-Tuning
8.4 The Separating Axis Theorem (SAT) and Minimum Translation Vector (MTV)
8.4.1 Detecting Collisions with the SAT
8.4.2 Reacting to Collisions with the Minimum Translation Vector
8.5 Conclusion
Chapter 9: Game Development
9.1 A Game Engine
9.1.1 The Game Loop
9.1.2 Loading Images
9.1.3 Multitrack Sound
9.1.4 Keyboard Events
9.1.5 High Scores
9.1.6 The Game Engine Listing
9.2 The Ungame
9.2.1 The Ungameโs HTML
9.2.2 The Ungameโs Game Loop
9.2.3 Loading the Ungame
9.2.4 Pausing
9.2.5 Key Listeners
9.2.6 Game Over and High Scores
9.3 A Pinball Game
9.3.1 The Game Loop
9.3.2 The Ball
9.3.3 Gravity and Friction
9.3.4 Flipper Motion
9.3.5 Handling Keyboard Events
9.3.6 Collision Detection
9.4 Conclusion
Chapter 10: Custom Controls
10.1 Rounded Rectangles
10.2 Progress Bars
10.3 Sliders
10.4 An Image Panner
10.5 Conclusion
Chapter 11: Mobile
11.1 The Mobile Viewport
11.1.1 The viewport Metatag
11.2 Media Queries
11.2.1 Media Queries and CSS
11.2.2 Reacting to Media Changes with JavaScript
11.3 Touch Events
11.3.1 Touch Event Objects
11.3.2 Touch Lists
11.3.3 Touch Objects
11.3.4 Supporting Both Touch and Mouse Events
11.3.5 Pinch and Zoom
11.4 iOS5
11.4.1 Application Icons and Startup Images
11.4.2 Media Queries for iOS5 Application Icons and Startup Images
11.4.3 Fullscreen with No Browser Chrome
11.4.4 Application Status Bar
11.5 A Virtual Keyboard
11.5.1 A Canvas-Based Keyboard Implementation
11.6 Conclusion
Index
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z