HTML5 and CSS3, Second Edition

We’re looking for an element on the page with the ID of logo, so we’d better

make sure we add our canvas element to the document so it can be found and

our detection will work.

html5_canvas/logo.html

<canvasid="logo"width="900"height="80">

<h1>AwesomeCo</h1>

</canvas>

Let’s start drawing our logo.

Drawing Lines

We draw lines on the canvas by playing a game of “connect the dots.” We

specify a starting point on the canvas grid and then specify additional points

on the grid to move to. As we move around the canvas, the dots get connected,

like this:

0 10 20 30 40 50

10

20

30

40

50

60 80

We use the beginPath() method to start drawing a line, and then we create our

path:

html5_canvas/logo.html

context.fillStyle="#FF0000";

context.strokeStyle="#FF0000";

context.lineWidth= 2;

context.beginPath();

context.moveTo(0,40);

context.lineTo(30,0);

context.lineTo(60,40 );

context.lineTo(285,40 );

context.fill();

context.closePath();

report erratum • discuss

Drawing a Logo on the Canvas • 115

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