HTML5 Canvas

Steve Fulton is an author, speaker, and game development professional. He works at Mattel Toys as Sr. Manager Of Software Development for the Digital Play division.

Jeff Fulton is an R.I.A. web and mobile game/application developer who has been cultivating an audience for news, stories, blogs, and tutorials about Flash, Corona, and now the HTML5 Canvas at his own website (http://www.8bitrocket.com) for the past five and a half years. Jeff is currently the Chief Technology Officer at Producto Studios and can easily be found on Twitter daily using the handle @8bitrocket. Jeff previously worked as a web development manager at Mattel Toys for 14 years, helping to create Mattel’s extensive online presence.

Chapter 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?
Chapter 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?
Chapter 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?
Chapter 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?
Chapter 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?
Chapter 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?
Chapter 7 Working with Audio
The Basic

»Arguable HTML5's most exciting tag, Canvas receives exhaustive scrutiny in this indispensable book. The many practical examples are enlightening, and equally detailed coverage of complementary HTML5 facilities like Video and Audio is a surprise bonus.« Raffaele Cecco, longtime developer of video games, including Cybernoid, Exolon, and Stormlord.