Core HTML5 Canvas: Graphics, Animation, and Game Development

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