HTML and CSS Reference
In-Depth Information
CHAPTER 1
Introduction to HTML5 Canvas
HTML5
is the current iteration of HTML, the
HyperText Markup Language
. HTML
was first standardized in 1993, and it was the fuel that ignited the World Wide Web.
HTML is a way to define the contents of a web page using tags that appear within pointy
brackets, < >.
HTML5 Canvas
is an
immediate mode
bitmapped area of the screen that can be ma-
nipulated with JavaScript. Immediate mode refers to the way the canvas renders pixels
on the screen. HTML5 Canvas completely redraws the bitmapped screen on every
frame using Canvas API calls from JavaScript. As a programmer, your job is to set up
the screen display before each frame is rendered so that the correct pixels will be shown.
This makes HTML5 Canvas very different from Flash, Silverlight, or SVG, which op-
erate 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 manip-
ulations; 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 topic 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
