HTML5 Canvas [3]
This makes HTML5 Canvas very different from Flash, Silverlight, or SVG, which operate in retained mode. In this mode, a display list of objects is kept by the graphics renderer, and objects are displayed on the screen according to attributes set in code (i.e., the x position, y position, and alpha transparency of an object). This keeps the programmer away from low-level operations, but gives her less control over the final rendering of the bitmapped screen.
The basic HTML5 Canvas API includes a 2D context that allows a programmer to draw various shapes, render text, and display images directly onto a defined area of the browser window. You can apply colors; rotations; alpha transparencies; pixel manipulations; and various types of lines, curves, boxes, and fills to augment the shapes, text, and images you place onto the canvas.
In itself, the HTML5 Canvas 2D context is a display API used to render graphics on a bitmapped area, but there is very little in that context to create applications using the technology. By adding cross-browser-compatible JavaScript functionality for keyboard and mouse inputs, timer intervals, events, objects, classes, sound, math functions, etc., you can learn to take HTML5 Canvas and create stunning animations, applications, and games.
Here’s where this book comes in. We are going to break down the Canvas API into digestible parts and then put it back together, demonstrating how to use it to create applications. Many of the techniques you will learn in this book have been tried and used successfully on other platforms, and now we are applying them to this exciting new technology.
BROWSER SUPPORT FOR HTML5 CANVAS
With the exception of Internet Explorer 8, HTML5 Canvas is supported in some way by most modern web browsers, with specific feature support growing on an almost daily basis. The best support seems to be from Google Chrome, followed closely by Safari, Firefox, and Opera. We will utilize a JavaScript library named modernizr.js that will help us figure out which browsers support which Canvas features. At the same time, if you are worried about Internet Explorer, version 9 promises to have support for Canvas. In the meantime, you can check out Google Chrome Frame (http://code.google.com/chrome/chromeframe/), which delivers Canvas support for IE.
The Basic HTML Page
Before we get to Canvas, we need to talk a bit about the HTML5 standards we will be using to create our web pages.
HTML is the standard language used to construct pages on the World Wide Web. We will not spend much time on HTML, but it does form the basis of