THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 254

h e instance of the rendering context is named contextNow . It has the methods and
properties of the 2d rendering context.

Making the drawing
Before going on to the actual drawing, you may be wondering about the canvasNow and
contextNow objects. Aren't those really variables? At er all, variables can be assigned
objects. Well, that's one way to think about them, but the variables are assigned objects with
their own methods and properties. So, aren't they actually instances of objects? When a
variable is assigned a real number, it is, for all intents and purposes, a number. You can do
math operations just as you can with a literal number. Instead of quibbling about whether the
program structures are really variables or objects, just treat them as objects (just as variables
with text or numbers can be treated as strings or numbers).

First, assign the drawing a color. You can use any of the techniques available to create a color
as described in Chapter 4. h is example uses the hexadecimal format:

contextNow.fillStyle = '#cc0000';

h e fillStyle property is only for the i ll color and not the stroke (outline) of the object.

Next, the i ll color needs a shape to i ll. To i ll a rectangle, use the following:

258

contextNow.fillRect(5,20,100,100);

To explain everything in that last piece of code, Figure 13-4 breaks it down.

X position

Width

Height

Y position

Figure 13-4: Details of the fillRect() method.

h e i rst two values place it within the canvas area — not the whole Web page — and the
second two values specify the width and height of the rectangle.

h e last requirement is actually to carry out i lling the rectangle with the specii ed color. h e
next line performs that task:

contextNow.fill();

No matter how many operations are dei ned, a single fill() method takes care of all the
i lls dei ned in the larger method.