Synopses & Reviews
Flash is fading fast as Canvas continues to climb. The second edition of this popular book gets you started with HTML5 Canvas by showing you how to build interactive multimedia applications. Youll learn how to draw, render text, manipulate images, and create animation—all in the course of building an interactive web game throughout the book.
Updated for the latest implementations of Canvas and related HTML5 technologies, this edition includes clear and reusable code examples to help you quickly pick up the basics—whether you currently use Flash, Silverlight, or just HTML and JavaScript. Discover why HTML5 is the future of innovative web development.
- Create and modify 2D drawings, text, and bitmap images
- Use algorithms for math-based movement and physics interactions
- Incorporate and manipulate video, and add audio
- Build a basic framework for creating a variety of games
- Use bitmaps and tile sheets to develop animated game graphics
- Go mobile: build web apps and then modify them for iOS devices
- Explore ways to use Canvas for 3D and multiplayer game applications
About the Author
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 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 (Productostudios.com) 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 Mattels extensive online presence.
Table of Contents
Dedication; Preface; Introduction to the Second Edition; Conventions Used in This Book; Using Code Examples; Safari® Books Online; How to Contact Us; Acknowledgments; Chapter 1: Introduction to HTML5 Canvas; 1.1 What Is HTML5?; 1.2 The Basic HTML5 Page; 1.3 Basic HTML We Will Use in This Book; 1.4 The Document Object Model (DOM) and Canvas; 1.5 JavaScript and Canvas; 1.6 HTML5 Canvas "Hello World!"; 1.7 Debugging with console.log; 1.8 The 2D Context and the Current State; 1.9 The HTML5 Canvas Object; 1.10 Another Example: Guess The Letter; 1.11 Hello World Animated Edition; 1.12 HTML5 Canvas and Accessibility: Sub Dom; 1.13 What's Next?; Chapter 2: Drawing on the Canvas; 2.1 The Basic File Setup for This Chapter; 2.2 The Basic Rectangle Shape; 2.3 The Canvas State; 2.4 Using Paths to Create Lines; 2.5 Advanced Path Methods; 2.6 Compositing on the Canvas; 2.7 Simple Canvas Transformations; 2.8 Filling Objects with Colors and Gradients; 2.9 Filling Shapes with Patterns; 2.10 Creating Shadows on Canvas Shapes; 2.11 Methods to Clear the Canvas; 2.12 Checking to See Whether a Point Is in the Current Path; 2.13 Drawing a Focus Ring; 2.14 What's Next?; Chapter 3: The HTML5 Canvas Text API; 3.1 Canvas Text and CSS; 3.2 Displaying Basic Text; 3.3 Setting the Text Font; 3.4 Text and the Canvas Context; 3.5 Text with Gradients and Patterns; 3.6 Width, Height, Scale, and toDataURL() Revisited; 3.7 Final Version of Text Arranger; 3.8 Animated Gradients; 3.9 The Future of Text on the Canvas; 3.10 What's Next?; Chapter 4: Images on the Canvas; 4.1 The Basic File Setup for This Chapter; 4.2 Image Basics; 4.3 Simple Cell-Based Sprite Animation; 4.4 Advanced Cell-Based Animation; 4.5 Applying Rotation Transformations to an Image; 4.6 Creating a Grid of Tiles; 4.7 Diving into Drawing Properties with a Large Image; 4.8 Pixel Manipulation; 4.9 Copying from One Canvas to Another; 4.10 Using Pixel Data to Detect Object Collisions; 4.11 What's Next?; Chapter 5: Math, Physics, and Animation; 5.1 Moving in a Straight Line; 5.2 Bouncing Off Walls; 5.3 Curve and Circular Movement; 5.4 Simple Gravity, Elasticity, and Friction; 5.5 Easing; 5.6 Box2D and the Canvas; 5.7 Interactivity with Box2D; 5.8 Box2D Further Reading; 5.9 What's Next?; Chapter 6: Mixing HTML5 Video and Canvas; 6.1 HTML5 Video Support; 6.2 Converting Video Formats; 6.3 Basic HTML5 Video Implementation; 6.4 Preloading Video in JavaScript; 6.5 Video and the Canvas; 6.6 Video on the Canvas Examples; 6.7 Animation Revisited: Moving Videos; 6.8 Capturing Video with JavaScript; 6.9 Video and Mobile; 6.10 What's Next?; Chapter 7: Working with Audio; 7.1 The Basic