Books & Videos

Table of Contents

  1. Chapter 1 Introduction to HTML5 Canvas

    1. What Is HTML5?

    2. The Basic HTML5 Page

    3. Basic HTML We Will Use in This Book

    4. The Document Object Model (DOM) and Canvas

    5. JavaScript and Canvas

    6. HTML5 Canvas “Hello World!”

    7. Debugging with console.log

    8. The 2D Context and the Current State

    9. The HTML5 Canvas Object

    10. Another Example: Guess The Letter

    11. Hello World Animated Edition

    12. HTML5 Canvas and Accessibility: Sub Dom

    13. What’s Next?

  2. Chapter 2 Drawing on the Canvas

    1. The Basic File Setup for This Chapter

    2. The Basic Rectangle Shape

    3. The Canvas State

    4. Using Paths to Create Lines

    5. Advanced Path Methods

    6. Compositing on the Canvas

    7. Simple Canvas Transformations

    8. Filling Objects with Colors and Gradients

    9. Filling Shapes with Patterns

    10. Creating Shadows on Canvas Shapes

    11. Methods to Clear the Canvas

    12. Checking to See Whether a Point Is in the Current Path

    13. Drawing a Focus Ring

    14. What’s Next?

  3. Chapter 3 The HTML5 Canvas Text API

    1. Canvas Text and CSS

    2. Displaying Basic Text

    3. Setting the Text Font

    4. Text and the Canvas Context

    5. Text with Gradients and Patterns

    6. Width, Height, Scale, and toDataURL() Revisited

    7. Final Version of Text Arranger

    8. Animated Gradients

    9. The Future of Text on the Canvas

    10. What’s Next?

  4. Chapter 4 Images on the Canvas

    1. The Basic File Setup for This Chapter

    2. Image Basics

    3. Simple Cell-Based Sprite Animation

    4. Advanced Cell-Based Animation

    5. Applying Rotation Transformations to an Image

    6. Creating a Grid of Tiles

    7. Diving into Drawing Properties with a Large Image

    8. Pixel Manipulation

    9. Copying from One Canvas to Another

    10. Using Pixel Data to Detect Object Collisions

    11. What’s Next?

  5. Chapter 5 Math, Physics, and Animation

    1. Moving in a Straight Line

    2. Bouncing Off Walls

    3. Curve and Circular Movement

    4. Simple Gravity, Elasticity, and Friction

    5. Easing

    6. Box2D and the Canvas

    7. Interactivity with Box2D

    8. Box2D Further Reading

    9. What’s Next?

  6. Chapter 6 Mixing HTML5 Video and Canvas

    1. HTML5 Video Support

    2. Converting Video Formats

    3. Basic HTML5 Video Implementation

    4. Preloading Video in JavaScript

    5. Video and the Canvas

    6. Video on the Canvas Examples

    7. Animation Revisited: Moving Videos

    8. Capturing Video with JavaScript

    9. Video and Mobile

    10. What’s Next?

  7. Chapter 7 Working with Audio

    1. The Basic <audio> Tag

    2. Audio Formats

    3. Audio Tag Properties, Functions, and Events

    4. Playing a Sound with No Audio Tag

    5. Creating a Canvas Audio Player

    6. Case Study in Audio: Space Raiders Game

    7. Web Audio API

    8. What’s Next?

  8. Chapter 8 Canvas Games: Part I

    1. Why Games in HTML5?

    2. Our Basic Game HTML5 File

    3. Our Game’s Design

    4. Game Graphics: Drawing with Paths

    5. Animating on the Canvas

    6. Applying Transformations to Game Graphics

    7. Game Graphic Transformations

    8. Game Object Physics and Animation

    9. A Basic Game Framework

    10. Putting It All Together

    11. The Player Object

    12. Geo Blaster Game Algorithms

    13. The Geo Blaster Basic Full Source

    14. Rock Object Prototype

    15. Simple A* Path Finding on a Tile Grid

    16. What’s Next?

  9. Chapter 9 Canvas Games: Part II

    1. Geo Blaster Extended

    2. Creating a Dynamic Tile Sheet at Runtime

    3. A Simple Tile-Based Game

    4. Scrolling a Tile-Based World

    5. What’s Next?

  10. Chapter 10 Going Mobile!

    1. The First Application

    2. Retro Blaster Touch

    3. Mobilizing Retro Blaster Touch

    4. Beyond the Canvas

    5. What’s Next?

  11. Chapter 11 Further Explorations

    1. 3D with WebGL

    2. Multiplayer Applications with ElectroServer 5

    3. Creating a Simple Object Framework for the Canvas

    4. Windows 8 Apps and the HTML5 Canvas

    5. What’s Next in HTML5.1 and Canvas Level 2?

    6. Conclusion

  1. Appendix Full Code Listings

    1. Code from Chapter 7

    2. Code from Chapter 9

    3. Code from Chapter 11

  2. Colophon