Core HTML5 Canvas: Graphics, Animation, and Game Development

Core HTML5 Canvas: Graphics, Animation, and Game Development

by David Geary
Released May 2012
Publisher(s): Pearson
ISBN: 9780132761635

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Succinctly and clearly written, this book examines dozens of real-world uses of the Canvas API, such as interactively drawing and manipulating shapes, saving and restoring the drawing surface to temporarily draw shapes and text, and implementing text controls. You’ll see how to keep your applications responsive with web workers when you filter images, how to implement smooth animations, and how to create layered, 3D scrolling backgrounds with parallax. In addition, you’ll see how to implement video games with extensive coverage of sprites, physics, collision detection, and the implementation of a game engine and an industrial-strength pinball game. The book concludes by showing you how to implement Canvas-based controls that you can use in any HTML5 application and how to use Canvas on mobile devices, including iOS5. This authoritative Canvas reference covers

  • The canvas element—using it with other HTML elements, handling events, printing a canvas, and using offscreen canvases

  • Shapes—drawing, dragging, erasing, and editing lines, arcs, circles, curves, and polygons; using shadows, gradients, and patterns

  • Text—drawing, positioning, setting font properties; building text controls

  • Images—drawing, scaling, clipping, processing, and animating

  • Animations—creating smooth, efficient, and portable animations

  • Sprites—implementing animated objects that have painters and behaviors

  • Physics—modeling physical systems (falling bodies, pendulums, and projectiles), and implementing tweening for nonlinear motion and animation

  • Collision detection—advanced techniques, clearly explained

  • Game development—all aspects of game development, such as time-based motion and high score support, implemented in a game engine

  • Custom controls—infrastructure for implementing custom controls; implementing progress bars, sliders, and an image panner

  • Mobile applications—fitting Canvas apps on a mobile screen, using media queries, handling touch events, and specifying iOS5 artifacts, such as app icons

Throughout the book, Geary discusses high-quality, reusable code to help professional developers learn everything they really need to know, with no unnecessary verbiage. All of the book’s code and live demonstrations of key techniques are available at corehtml5canvas.com.

Table of contents

  1. Title Page
  2. Copyright Page
  3. Contents
  4. Preface
    1. Reading This Book
    2. An Overview of This Book
    3. Prerequisites
    4. The Book’s Code
    5. The Future of Canvas and This Book
    6. The Companion Website
  5. Acknowledgments
  6. About the Author
  7. Chapter 1. Essentials
    1. 1.1. The canvas Element
    2. 1.2. Canvas Contexts
    3. 1.3. Canonical Examples in This Book
    4. 1.4. Getting Started
    5. 1.5. Fundamental Drawing Operations
    6. 1.6. Event Handling
    7. 1.7. Saving and Restoring the Drawing Surface
    8. 1.8. Using HTML Elements in a Canvas
    9. 1.9. Printing a Canvas
    10. 1.10. Offscreen Canvases
    11. 1.11. A Brief Math Primer
    12. 1.12. Conclusion
  8. Chapter 2. Drawing
    1. 2.1. The Coordinate System
    2. 2.2. The Drawing Model
    3. 2.3. Drawing Rectangles
    4. 2.4. Colors and Transparency
    5. 2.5. Gradients and Patterns
    6. 2.6. Shadows
    7. 2.7. Paths, Stroking, and Filling
    8. 2.8. Lines
    9. 2.9. Arcs and Circles
    10. 2.10. Bézier Curves
    11. 2.11. Polygons
    12. 2.12. Advanced Path Manipulation
    13. 2.13. Transformations
    14. 2.14. Compositing
    15. 2.15. The Clipping Region
    16. 2.16. Conclusion
  9. Chapter 3. Text
    1. 3.1. Stroking and Filling Text
    2. 3.2. Setting Font Properties
    3. 3.3. Positioning Text
    4. 3.4. Implementing Text Controls
    5. 3.5. Conclusion
  10. Chapter 4. Images and Video
    1. 4.1. Drawing Images
    2. 4.2. Scaling Images
    3. 4.3. Drawing a Canvas into a Canvas
    4. 4.4. Offscreen Canvases
    5. 4.5. Manipulating Images
    6. 4.6. Clipping Images
    7. 4.7. Animating Images
    8. 4.8. Security
    9. 4.9. Performance
    10. 4.10. A Magnifying Glass
    11. 4.11. Video Processing
    12. 4.12. Conclusion
  11. Chapter 5. Animation
    1. 5.1. The Animation Loop
    2. 5.2. Calculating Frame Rates
    3. 5.3. Scheduling Tasks at Alternate Frame Rates
    4. 5.4. Restoring the Background
    5. 5.5. Double Buffering
    6. 5.6. Time-Based Motion
    7. 5.7. Scrolling the Background
    8. 5.8. Parallax
    9. 5.9. User Gestures
    10. 5.10. Timed Animations
    11. 5.11. Animation Best Practices
    12. 5.12. Conclusion
  12. Chapter 6. Sprites
    1. 6.1. Sprites Overview
    2. 6.2. Painters
    3. 6.3. Sprite Behaviors
    4. 6.4. Sprite Animators
    5. 6.5. A Sprite-Based Animation Loop
    6. 6.6. Conclusion
  13. Chapter 7. Physics
    1. 7.1. Gravity
    2. 7.2. Warping Time
    3. 7.3. Time-Warp Functions
    4. 7.4. Warping Motion
    5. 7.5. Warping Animation
    6. 7.6. Conclusion
  14. Chapter 8. Collision Detection
    1. 8.1. Bounding Areas
    2. 8.2. Bouncing Off Walls
    3. 8.3. Ray Casting
    4. 8.4. The Separating Axis Theorem (SAT) and Minimum Translation Vector (MTV)
    5. 8.5. Conclusion
  15. Chapter 9. Game Development
    1. 9.1. A Game Engine
    2. 9.2. The Ungame
    3. 9.3. A Pinball Game
    4. 9.4. Conclusion
  16. Chapter 10. Custom Controls
    1. 10.1. Rounded Rectangles
    2. 10.2. Progress Bars
    3. 10.3. Sliders
    4. 10.4. An Image Panner
    5. 10.5. Conclusion
  17. Chapter 11. Mobile
    1. 11.1. The Mobile Viewport
    2. 11.2. Media Queries
    3. 11.3. Touch Events
    4. 11.4. iOS5
    5. 11.5. A Virtual Keyboard
    6. 11.6. Conclusion
  18. Index

Product information

  • Title: Core HTML5 Canvas: Graphics, Animation, and Game Development
  • Author(s): David Geary
  • Release date: May 2012
  • Publisher(s): Pearson
  • ISBN: 9780132761635