Programming Basics: A website for teaching people how to program
Do your programming with [jsbin] or [Orion]

Computer Graphics with HTML5 Canvas and JavaScript: Filled Shapes

So far I've shown you how to draw different types of lines. In this part of the talk, I'll show you how to make filled shapes as well.

Drawing filled shapes isn't that much different than drawing lines. Here is the code for drawing the outline of a square. We start with beginPath() to say we're going to start drawing some lines.

We then move to somewhere.

We tell the computer the four lines that we want to draw.

Then we use the command c.stroke() to actually draw the square's outline.

Let's say instead of drawing the outline, we actually wanted to draw a filled-in shape. All we have to do is remove the c.stroke() command.

And use the command c.fill() instead.

When the computer sees c.fill(), it fills in the shape instead of just drawing the outline.

It's fairly easy to fill in the shape with different colors too.

You just use the c.fillStyle command and then the color that you want to computer to use. Here, we'll use red, and the computer will draw a red square. It's just like the c.strokeStyle command we looked at before except for fills.

Go ahead now and try using these filled shapes. You might want to try drawing some scenery, or animals, or cool 3d looking things using these new filled shapes.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy