HTML5 and CSS3, Second Edition

Once we have the canvas’s context, we add elements to that context, which

causes them to be rendered to the screen. For example, to add a red box, we

write code like this:

html5_canvas/canvas_simple_drawing.html

context.fillStyle="rgb(200,0,0)";

context.fillRect(10,10, 100,100);

We first set a fill color, which is the color of our box. Then we create the box

itself. The canvas’s 2D context is a grid, with the top-left corner as the default

origin. When we create a shape like a box, we specify the starting x- and

y-coordinates and the width and height.

0 20 40 60 80 100

20

40

60

80

100

Each shape is added onto its own layer, so you could create three boxes with

a 10-pixel offset, like this:

html5_canvas/canvas_simple_drawing.html

context.fillStyle="rgb(200,0,0)";

context.fillRect(10,10, 100,100);

context.fillStyle="rgb(0,200,0)";

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

context.fillStyle="rgb(0,0,200)";

context.fillRect(30,30, 100,100);

and they’ll stack on top of each other, like this:

report erratum • discuss

Drawing a Logo on the Canvas • 113

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