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 ...