HTML5 and CSS3, Second Edition

these new shapes right where we want to without having to transpose the

coordinates for every point on the shape.

Let’s draw the smaller inner square by moving the origin.

html5_canvas/logo.html

context.save();

context.translate(20,20);

context.fillRect(0,0,20,20);

The square is placed inside of the larger triangle, like this:

Notice that before we move the origin, we call the save() method. This saves

the previous state of the canvas so we can revert easily. It’s like a restore

point, and you can think of it as a stack. Every time you call save(), you get a

new entry. When we’re all done, we’ll call restore(), which will restore the top

save point on the stack.

Now let’s use a path to draw the inner triangle, but instead of using a stroke,

we’ll use a fill to create the illusion that the triangle is cutting into the square.

html5_canvas/logo.html

context.fillStyle ="#FFFFFF";

context.strokeStyle="#FFFFFF";

context.lineWidth= 2;

context.beginPath();

context.moveTo(0,20);

context.lineTo(10,0);

context.lineTo(20,20 );

context.lineTo(0,20 );

context.fill();

context.closePath();

context.restore();

Here we set the stroke and fill to white (#fff) before we begin drawing. This

overrides the previous color values we set. Then we draw our lines, and since

we moved the origin previously, we’re relative to the top-left corner of the

square we just drew.

We’ve got our completed logo, but we can make it stand out more.

report erratum • discuss

Drawing a Logo on the Canvas • 117

Download from Wow! eBook <www.wowebook.com>