Core HTML5 Canvas: Graphics, Animation, and Game Development

One of HTML5’s most exciting features, Canvas provides a powerful 2D graphics API that lets you implement everything from word processors to video games. In Core HTML5 Canvas, best-selling author David Geary presents a code-fueled, no-nonsense deep dive into that API, covering everything you need to know to implement rich and consistent web applications that run on a wide variety of operating systems and devices. Salient Features* Practical, expert guidance for building more sophisticated web applications with richer user experiences* Covers threading, Web Workers, client-side storage, Ajax, web sockets, the canvas, animations, media, drag-and-drop, and more* The classic, proven Core Series approach: teaches through extensively documented, industrial-strength code examples About the Author David Geary is a prominent author, speaker, and consultant who teaches developers how to implement web applications. He wrote the best-selling books on both Java component frameworks: Graphic Java 2: Swing, Third Edition (Prentice Hall, 1999), and (with Cay Horstmann) Core JavaServerTM Faces, Third Edition (Prentice Hall, 2010). David is a prolific speaker who is a three-time JavaOne Rock Star. In 2011, David co-founded the HTML5 Denver meetup group. Table of Contents Preface* Acknowledgments* About the Author Chapter 1: Essentials 1.1 The canvas Element 1.2 Canvas Contexts 1.3 Canonical Examples in This Book 1.4 Getting Started 1.5 Fundamental Drawing Operationsv 1.6 Event Handling 1.7 Saving and Restoring the Drawing Surface 1.8 Using HTML Elements in a Canvas 1.9 Printing a Canvas 1.10 Offscreen Canvases 1.11 A Brief Math Primer 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.6 Shadows 2.7 Paths, Stroking, and Filling 2.8 Lines 2.9 Arcs and Circles 2.10 Bzier Curves 2.11 Polygons 2.12 Advanced Path Manipulation 2.13 Transformations 2.14 Compositing 2.15 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.4 Implementing Text Controls 3.5 Conclusion Chapter 4: Images and Video 4.1 Drawing Images 4.2 Scaling Images 4.3 Drawing a Canvas into a Canvas 4.4 Offscreen Canvases 4.5 Manipulating Images 4.6 Clipping Images 4.7 Animating Images 4.8 Security 4.9 Performance 4.10 A Magnifying Glass 4.11 Video Processing 4.12 Conclusion Chapter 5: Animation 5.1 The Animation Loop 5.2 Calculating Frame Rates 5.3 Scheduling Tasks at Alternate Frame Rates 5.4 Restoring the Background 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.11 Animation Best Practices 5.12 Conclusion Chapter 6: Sprites 6.1 Sprites Overview 6.2 Painters 6.3 Sprite Behaviors 6.4 Sprite Animators 6.5 A Sprite-Based Animation Loop 6.6 Conclusion Chapter 7: Physics 7.1 Gravity 7.2 Warping Time 7.3 Time-Warp Functions 7.4 Warping Motion 7.5 Warping Animation 7.6 Conclusion Chapter 8: Collision Detection 8.1 Bounding Areas 8.2 Bouncing Off Walls 8.3 Ray Casting 8.4 The Separating Axis Theorem (SAT) and Minimum Translation Vector (MTV) 8.5 Conclusion Chapter 9: Game Development 9.1 A Game Engine 9.2 The Ungame 9.3 A Pinball Game 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.2 Media Queries 11.3 Touch Events 11.4 iOS5 11.5 A Virtual Keyboard 11.6 Conclusion Index