THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 269

So far so good, but the original briefcase is brown, so it's going to need some color. h e way to
color is the same as it is for rectangles: Use context.fillStyle =”color” . h e
complex drawing methods include context.fill() to i ll in an outline. So, taking out the
context.stroke() , replacing it with context.fill() , and adding a fillStyle
method should do the trick. Figure 13-12 shows the results.

Figure 13-12: The fi lled image covering the handle.

In looking at Figure 13-12, you can see that the outline and color are correct, but instead of a
handle there's a block. Whenever a series of drawing methods are used without beginning a
new path, and then when the context.fill() method is called, it i lls it to the beginning
of the path. As a result, everything is i lled and not just the parts you want.

273

To i x this, two context.fill() methods are employed. One is at the end of the i rst
outline of the briefcase, and the second is at the end of the outline for the handle. h e i rst is
i lled with brown, and the second is i lled with white. Additionally, a second context.
beginPath() is added at the beginning of the drawing of the handle. h e following
program ( SimpleLineDrawingFilled.html in this chapter's folder at www.wiley.
com/go/smashinghtml5 ) has all the code revised to generate the i lled image.

<! DOCTYPE html >
< html >
< head >
< script language = ”javascript” >
//colors: 960, fff, 000
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“briefCase”);
contextNow = canvasNow.getContext('2d');
contextNow.beginPath();
contextNow.moveTo(40,20);
contextNow.lineTo(72,20);
contextNow.lineTo(72,38);