HTML5 Canvas [0]
Native Interactivity and Animation for the Web
Steve Fulton
Jeff Fulton
Editor
Simon St. Laurent
Editor
Mike Loukides
Copyright © 2011 8bitrocket Studios
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. HTML5 Canvas, the image of a kaka parrot, and related trade dress are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
O'Reilly Media
* * *
DEDICATION
To Flash.
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.
Chrome
Safari
Opera
Firefox
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.