HTML and CSS Reference
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
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
<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
programming working with the DOM.
rel ect the programming structure of the DOM. So, the i rst task is to create an object and a
method for it.
As you saw in Chapter 12, all that does is set up an object and a method for the object — a
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
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');