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 manipulated
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 by 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 operate in
retained mode
. In this mode, a display list of objects is kept by the graphics renderer, and ob-
jects are displayed on the screen according to attributes set in code (that is, 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 vari-
ous shapes, render text, and display images directly onto a defined area of the browser win-
dow.Youcanapplycolors;rotations;gradientfills;alphatransparencies;pixelmanipulations;
andvarioustypesoflines,curves,boxes,andfillstoaugmenttheshapes,text,andimagesyou
place onto the canvas.
In itself, the HTML5 Canvas 2D context is a display API used to render graphics on a bit-
mappedarea,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, and so on, 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 applications. Many
of the techniques you will learn in this topic have been tried and used successfully on other
platforms, and now we are applying them to this exciting new technology.
