HTML5 and CSS3, Second Edition

Before we start drawing anything, we set the stroke and fill colors for the

canvas. The stroke is the color of any lines we create. The fill color is the

color that shapes, like rectangles or triangles, get filled in with. Think of

the stroke as the color of a shape’s perimeter, and the fill color as the shape’s

area.

When we’re done defining the points of our path, we call the stroke() method

to draw the line that connects the points. We then call the closePath() method

to complete the path we’ve drawn. Our completed line looks like this:

Next let’s add the “AwesomeCo” text to the canvas.

Adding Text

Before we can add text to the canvas, we have to choose a font and a font

size. Then we have to place the text at the appropriate coordinates on the

grid. We add the text “AwesomeCo” to our canvas like this:

html5_canvas/logo.html

context.font="italic40px'Arial'";

context.fillText("AwesomeCo", 60, 36);

We define the text type, size, and font before we apply it to the canvas. We

use the fillText() method so we get text that’s filled in with the fill color we set

earlier, and we place the text 60 pixels across and 36 pixels down so it sits

right on the path we just drew, to the right of the large triangle but just above

the line, like this:

Now let’s draw the box-and-triangle combination that sits within the big

triangle.

Moving the Origin

Instead of creating a complex shape by drawing a path, we’ll make this box

and triangle by creating a small square and placing a white triangle on top

of the square. When we draw shapes and paths, we can specify the x- and

y-coordinates from the origin at the top-left corner of the canvas, but we can

also just move the origin to a new location. This makes it easy for us to draw

Chapter 6. Drawing in the Browser • 116

Download from Wow! eBook <www.wowebook.com> report erratum • discuss