THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 253

the right, the i rst value increases. If you move 15 pixels to the right, the value becomes
15,0 — this is the x-axis. As you move down, the second value (y-axis) increases. If you
moved down 20, the position would be expressed as 15,20. Suppose, that you wanted to use
that position as your starting point and create a 100-pixel square. It helps to visualize the
position and size relative to the Web page with the grids, but you get a clearer idea of the
image you're creating without the grid marks. Using both will help.

Setting up for canvas drawings
Now we're set to i ll the blank box. To do so requires JavaScript. h e only thing you do with
the <canvas> tag is describe the area where you can place your graphics in a rendering
context and a reference ID. So, starting small, this i rst little drawing will begin with the
following tag:

<canvas id = ”redHot” width = ”100” height = ”100” >

h is should be pretty familiar. h e width and height were simplii ed to equal 100 pixels,
and the new name of the canvas object is redHot . I've already covered the closing
</canvas> tag and message in the container. And the rest of the work is all JavaScript
programming working with the DOM.

As noted earlier, I'm going to try to simplify things by using a little OOP in the JavaScript to
rel ect the programming structure of the DOM. So, the i rst task is to create an object and a
method for it.

257

CanvasMaster=new Object();
CanvasMaster.showCanvas=function()...

As you saw in Chapter 12, all that does is set up an object and a method for the object — a
function that will call the JavaScript operations when we need it.

Next, the program needs a way to access the canvas DOM node. h at's the part of the DOM
that has canvas and canvas-related methods and properties. h e i rst step is to create an
object that holds the DOM node. Instead of thinking of assigning a node to a variable, think
of it as creating an instance of an object that has the properties and methods of the canvas
object.

canvasNow = document.getElementById(“redHot”);

h at line creates an object that contains the canvas object named redHot.

Once we have an instance of a canvas object, the program needs a rendering context. About
the only context available is one called 2d , suggesting a two-dimensional drawing context.
h e canvas object ( canvasNow ) has a method called getContext() to do what it says: get
the rendering context.

contextNow = canvasNow.getContext('2d');