The Essential Guide to HTML5

CHAPTER 2

... Here is where the initial static content will go...

To work with the canvas, we include the tags for canvas in the body element of the HTML document and
JavaScript in the script element. I'll start by describing a standard way to write a canvas element.

Your browser doesn't support the HTML5 element canvas.

If an HTML file with this coding is opened by a browser that does not recognize canvas, the message Your
browser doesn't support the HTML5 element canvas. appears on the screen. If you were
preparing web pages for all common browsers, you could choose to direct visitors to your site to
something else or try another strategy. In this book, I just focus on HTML5.

The HTML canvas tag defines this element to have an id of "canvas". This could have been anything, but
there
s no harm in using canvas. You can have more than one canvas, however, and in that case, you
would need to use distinct values for each id. That
s not what we do for this application, though, so we
don
t have to worry about it. The attributes of width and height are set to specify the dimensions of this
canvas element.

Now that we
ve seen the canvas in the body, let
s look at the JavaScript. The first step in drawing on the
canvas is to define the appropriate object in the JavaScript code. To do this, I need a variable so I set up
one named ctx with the line

var ctx;

outside of any function definition. This makes it a global variable that can be accessed or set from any
function. The ctx variable is something that
s needed for all drawing. I chose to name my variable ctx,
short for context, copying many of the examples I
ve seen online. I could have chosen any name.

Later in the code (you
ll see all the code in the examples that follow, and you can download it from
http://www.friendsofed.com/downloads.html),,) I write the code to set the value of ctx.

ctx = document.getElementById('canvas').getContext('2d');

What this does is first get the element in the document with the id 'canvas' and then extract what is
called the '2d' context. We can all anticipate that the future may bring other contexts! For now, we use the
2d one.

In the JavaScript coding, you can draw rectangles, paths including line segments and arcs, and position
image files on the canvas. You can also fill in the rectangles and the paths. Before we do this, however,
we need to tackle coordinate systems and radian measures.

Just as a global positioning system uses latitude and longitude to define your location on the map, we
need a way to specify points on the screen. These points are called pixels, and we used them in the
previous chapter to specify the width of images and the thickness of borders. The pixel is a pretty small
unit of measurement, as you can see if you do any experiments. However, it
s not enough for everyone to
agree on the linear unit. We also need to agree on the point from which we are measuring, just as GPS
systems use the Greenwich Meridian and the equator. For the two-dimensional rectangle that is the