HTML5 Canvas

Preface

HTML5 Canvas offers developers the chance to create animated graphics in ordinary web browsers using common tools: HTML and JavaScript. Canvas is one of the most visible parts of HTML5, fueling demo after demo, game after game. It offers interactivity with great visuals, and provides tremendous freedom to do whatever you want in the browser window. However, it differs enough from typical JavaScript development (as well as Flash and Silverlight development) that it needs careful exploration!

Running the Examples in the Book

The best part about programming HTML5 Canvas is that the entry barrier is very low—all you need is a modern web browser and a text editor.

As far as compatibility, we suggest you download and/or use the latest version of the web browsers as ordered below.

1. Chrome

2. Safari

3. Opera

4. Firefox

5. Internet Explorer (version 9 or higher)

Every example in this book was tested with Google Chrome, Safari, and Opera. Late in the development of the example code, Firefox started causing issues. While we made every attempt to ensure these examples worked across as many browsers as possible, we recommend you use Google Chrome or Safari for the best results until Canvas support improves.

Please note that if you are using the .pdf version of this book to cut and paste the code, there may be instances where minus (“-”) signs are represented by another character, such as a hyphen. You may need to replace the other character with a minus sign (“-”) to get the code to work properly.

We suggest that if you have purchased the electronic version of this book, you should use the printed code samples as a guide only, and instead download the code from the book distribution. With that code, you will also get all the images, libraries, and assets necessary to make all the examples work in a web browser.

What You Need to Know

Ideally, you know your way around programming in some kind of modern language, such as C, C++, C#, ActionScript 2, ActionScript 3, Java, or JavaScript. However, if you’re new to this space, we will introduce Canvas in a way that should familiarize you with web programming at the same time.

Web developers with a foundation in HTML and JavaScript should easily be able to pick up this book and run with it.

If you are a Flash developer, JavaScript and ActionScript 1 are essentially the same language. While Adobe took some liberties with ActionScript 2, you should be very comfortable with JavaScript. If you only have experience with ActionScript 3, JavaScript might feel like a step backward.

If you are a Silverlight or C# developer, take a deep breath and think about a time before ASP.NET/C# when you might have had to develop web apps in VBScript. You are about to enter a similar space.

How This Book Is Organized

This book is organized into 11 chapters. The first four chapters walk you through the HTML Canvas API by example. The topics covered include text, images, and drawing. These chapters contain a few finished apps, but mainly consist of demos designed to show you the facets of the Canvas API. The following six chapters build upon the Canvas API by expanding the scope of the examples to application length. In these chapters, we discuss math and physics applications, video, audio, games, and mobile. The final chapter introduces a couple experimental areas: 3D and multiplayer.

What you won’t get in this book is a simple rundown and retelling of the published W3C Canvas API. While we cover portions of the API in detail, some of it is not applicable to games. Furthermore, you can just read the documentation here:

http://dev.w3.org/html5/2dcontext

Our goal is to feature the ways Canvas can be used to create animation, games, and entertainment applications for the Web.

Conventions Used in This Book

The following typographical conventions are used in this book:

Plain text

Indicates menu titles, menu options, menu buttons, and keyboard accelerators (such as Alt and Ctrl).

Italic

Indicates new terms, URLs, email addresses, filenames, file extensions, pathnames, directories, and Unix utilities.

Constant width

Indicates commands, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, objects, events, event handlers, XML tags, HTML tags, macros, the contents of files, or the output from commands.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values.

Note

This icon signifies a tip, suggestion, or general note.

Warning

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “HTML5 Canvas by Steve Fulton and Jeff Fulton (O’Reilly). Copyright 2011 8bitrocket Studios, 978-1-4493-9390-8.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

We’d Like to Hear from You

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

[phone] (in the United States or Canada)

[phone] (international or local)

[phone] (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://www.oreilly.com/catalog/9781449393908

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

Acknowledgments

First, Steve would like to thank his beautiful wife, Dawn, for the amazing patience, guidance, and support she lovingly provided before, during, and after this book was written. Steve would also like to thank his girls—Rachel, Daphnie, and Katie—for all their enthusiastic support and for not getting too frustrated every time they asked him to play and Daddy said, “Sure, yeah, in just a couple minutes” because his head was buried in these pages. He’d also like to thank his mom and dad, plus his sisters, Mari and Carol for everything they taught us; and his uncle Richard and cousin John for all their love and support. Also thanks to Sue, Morgan, and Lauren Miller; Jen, Eric, Sarah, and Paige Garnica; Dietrich; Chantal Martin; and Ryan and Justin Fulton.

Jeff would like to thank his amazing wife, Jeanne, and his two wonderful boys, Ryan and Justin, for putting up with him writing this second book in two years. The writing process is a time- and energy-consuming endeavor that demands patience and understanding from those in close proximity to the temperamental author. Jeff would also like to thank his mom and dad, as well as sisters Mari and Carol, for the morale and babysitting support that was needed during the crucial writing times. Also, special thanks to the Perry and Backlar clans for all of their love and support.

The authors would also like to acknowledge all the fine people at O’Reilly, especially Mike Loukides, who took the chance on us for this book; and Simon St.Laurent, who led us out of the wilderness; our copyeditor, Marlowe Shaeffer, who made the text sparkle in her own special way; and our production editor, Kristen Borg, for finishing the job.

We’d also like to thank our technical reviewers, Raffaele Cecco, Shelley Powers, and Andres Pagella.

Thanks to everyone at Electrotank, especially Jobe Makar, Matthew Weisner, and Teresa Carrigan; as well as our friends at Jett Morgan, Creative Bottle, Producto Studios, Mattel, Mochi, Adobe, Microsoft, Zynga, The SPIL Group, Giles Thomas from Learningwebgl.com, Ari Feldman, and Terry Paton, plus Ace The Super Villain, Bas Alicante, egdcltd, Tony Fernando, SeuJogo, Hayes, Jose Garay, Richard Davey (@PhotonStorm), Squize and nGfx (@GamingYourWay), and all our other friends at 8bitrocket.com. We would also like to give a huge shout out to the simply outstanding team at 444 Deharo, especially the entire FV team and the Foo Fighters pod!

Finally, we’d like to thank all of our friends who helped along the way, including Ian Legler, Brandon Crist, Eric Barth, Wesley Crews, Kenny Brown, Mike Foti, Evan Pershing, Scott Johnson, Scott Lunceford, Kurt Legler, Ryan Legler, John Little, Matt Hyatt, Varun Tandon, Mark Hall, Jason Neifeld, Mike Peters and The Alarm.

…and, last but not least, thanks to the W3C for coming up with such a kickass spec for HTML5 Canvas.