HTML5 Canvas

Preface

1. Introduction to HTML5 Canvas
-What Is HTML5?
-The Basic HTML5 Page
-Basic HTML We Will Use in This Book
-The Document Object Model (DOM) and Canvas
-JavaScript and Canvas
-HTML5 Canvas “Hello World!”
-Debugging with console.log
-The 2D Context and the Current State
-The HTML5 Canvas Object
-Another Example: Guess The Letter
-Hello World Animated Edition
-HTML5 Canvas and Accessibility: Sub Dom
-What's Next?

2. Drawing on the Canvas
-The Basic File Setup for This Chapter
-The Basic Rectangle Shape
-The Canvas State
-Using Paths to Create Lines
-Advanced Path Methods
-Compositing on the Canvas
-Simple Canvas Transformations
-Filling Objects with Colors and Gradients
-Filling Shapes with Patterns
-Creating Shadows on Canvas Shapes
-Methods to Clear the Canvas
-Checking to See Whether a Point Is in the Current Path
-Drawing a Focus Ring
-What's Next?

3. The HTML5 Canvas Text API
-Canvas Text and CSS
-Displaying Basic Text
-Setting the Text Font
-Text and the Canvas Context
-Text with Gradients and Patterns
-Width, Height, Scale, and toDataURL() Revisited
-Final Version of Text Arranger
-Animated Gradients
-The Future of Text on the Canvas
-What's Next?

4. Images on the Canvas
-The Basic File Setup for This Chapter
-Image Basics
-Simple Cell-Based Sprite Animation
-Advanced Cell-Based Animation
-Applying Rotation Transformations to an Image
-Creating a Grid of Tiles
-Diving into Drawing Properties with a Large Image
-Pixel Manipulation
-Copying from One Canvas to Another
-Using Pixel Data to Detect Object Collisions
-What's Next?

5. Math, Physics, and Animation
-Moving in a Straight Line
-Bouncing Off Walls
-Curve and Circular Movement
-Simple Gravity, Elasticity, and Friction
-Easing
-Box2D and the Canvas
-Interactivity with Box2D
-Box2D Further Reading
-What's Next?

6. Mixing HTML5 Video and Canvas
-HTML5 Video Support
-Converting Video Formats
-Basic HTML5 Video Implementation
-Preloading Video in JavaScript
-Video and the Canvas
-Video on the Canvas Examples
-Animation Revisited: Moving Videos
-Capturing Video with JavaScript
-Video and Mobile
-What's Next?

7. Working with Audio
-The Basic <audio> Tag
-Audio Formats
-Audio Tag Properties, Functions, and Events
-Playing a Sound with No Audio Tag
-Creating a Canvas Audio Player
-Case Study in Audio: Space Raiders Game
-Web Audio API
-What's Next?

8. Canvas Games: Part I
-Why Games in HTML5?
-Our Basic Game HTML5 File
-Our Game's Design
-Game Graphics: Drawing with Paths
-Animating on the Canvas
-Applying Transformations to Game Graphics
-Game Graphic Transformations
-Game Object Physics and Animation
-A Basic Game Framework
-Putting It All Together
-The Player Object
-Geo Blaster Game Algorithms
-The Geo Blaster Basic Full Source
-Rock Object Prototype
-Simple A* Path Finding on a Tile Grid
-What's Next?

9. Canvas Games: Part II
-Geo Blaster Extended
-Creating a Dynamic Tile Sheet at Runtime
-A Simple Tile-Based Game
-Scrolling a Tile-Based World
-What's Next?

10. Going Mobile!
-The First Application
-Retro Blaster Touch
-Mobilizing Retro Blaster Touch
-Beyond the Canvas
-What's Next?

11. Further Explorations
-3D with WebGL
-Multiplayer Applications with ElectroServer 5
-Creating a Simple Object Framework for the Canvas
-Windows 8 Apps and the HTML5 Canvas
-What's Next in HTML5.1 and Canvas Level 2?
-Conclusion

A: Full Code Listings

Index