Canvas - Shapes + Fills

In this lesson, you’ll expand on what you’ve already learned about working with the Canvas element in HTML5. More specifically, you’ll learn how to use shapes in your Canvas creations, and then how to fill them in with colors and gradients.

“What are the different gradient fill types available via the canvas API?”
sample interview question

In this lesson we’re going to get into building shapes and paths with the Canvas. Shapes are a bit more sophisticated than the lines you drew in lesson 1 because there’s a lot more to think about. For example, consider a circle. You’ve got to consider the size of its radius and for other shapes and paths you’ll need to consider curvatures and angles. And then, once you’ve drawn a shape, you’re most likely going to want to fill it with a color or pattern, right?

There’s a lot to learn so check out our new friend, HTML5 Canvas Tutorials, and breeze through the section on Curves, starting with the Arc, through Paths up to Rounded Corners.

HTML5 Canvas Tutorials: Sections 1.3.1 - 1.4.3

Once you’ve mastered that, then try the sections on Shapes and Fill Styles.

HTML5 Canvas Tutorials: Sections 1.5.1 - 1.6.3

And just remember, memorizing every technique is not the goal here because chances are you’ll just google how to make a star on html5 canvas when you want to make a star! But if you want to become a star then you should also check out Applying styles and colors over at Mozilla Developer Network.

MDN: Canvas Tutorials - Applying styles and colors

If some of the calculations don’t make sense, here’s a little refresher from the Khan Academy on basic circle geometry.

What's next? Do the challenge!

0 Comments — Be the first!