Introduction to the HTML Canvas element

Drawing Paths - Lines and Rectangles

Drawing Paths - Curves and Arcs

Drawing Styles on HTML5 Canvas

Gradient Fills on the HTML5 Canvas

Drawing Text on Canvas

HTML Canvas and Images

Canvas Effects

Canvas Transformations

Canvas and Pixels

Listening for Mouse and Keyboard Events with HTML Canvas

Animating with Canvas

Learn HTML5 Graphics and Animation

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

When you draw strokes and fills on a canvas, initially they'll be drawn with default styles which are a single pixel, thick black stroke and a flat black fill. Let's look at how to customize these styles. I have a quick file here in which I'm drawing four rectangles. The first is stroked. The second is filled. The third is stroked and then filled. The last is filled and then stroked.

Now to change the color of a stroke or fill, set the context stroke style and fill style properties to the colors you want to use. Here I'll set the fill style to yellow and the stroke style to red, all before any drawing takes place.

Note that the 2D rendering context is a state machine. Once you set a particular style it puts the context into that state and all subsequent shapes will be drawn with that style until a new style is set. So all the strokes here are red and all of the fills are yellow.

To change the width of a stroke, use the line width property set to a pixel value width. I'll set it to 10. I'm not sure why it's line width instead of stroke width, but that's what it is. Now with a wider stroke we see a difference in the bottom two rectangles.

Remember that the third rectangle was stroked and then filled and the fourth was filled first and then stroked. This order matters, especially with wider strokes. The inner portion of the stroke will overlap part of the fill. So, if you draw the stroke first it will get partially covered by the fill. If you draw the fill first the fill will partially get covered by the stroke.

As for color values, these are always strings and follow the same rules as CSS colors. As you've just seen, we can use CSS color names such as red and yellow. We can also use hex values such as #FF00FF to make a purple stroke and #00FF00 to make a green fill. You can also use RGB strings like so, RGB25500 for a stroke and RGB0255255 for a fill. You can add an alpha channel by using RGBA.

Here I'll give the fill a 50 percent alpha by specifying 0.5 as the alpha value. Note how the stroke shows through the fill in the bottom left rectangle. There are a few more stroke properties that you probably won't use often but are invaluable when you need them. To demonstrate these I'm switching to a new file where I'm drawing a single line, a rectangle, and a pair of lines joined at an angle. These are drawn in a draw function, so I can draw them twice. First I draw the shapes using a gray stroke and a fairly thick line width.

Then I switch to a single pixel red stroke and draw them all again. This will help us see more clearly what's happening as we change these properties. First is the linecap property. As you can see, where the lines end the stroke ends abruptly in a straight line. We can change this through the context linecap property. This can be set to a string with three possible values. The default is butt, which gives you the effect you see here. Changing this to the string square tells canvas to draw a square shape at the end point of the line.

This will effectively extend the length of the line by one half the line width. The third possibility is the string round. This effectively draws a circle at the ends of the lines, again, extending the line length by one half the line width. Note that the linecap function only affects the points where the lines end. The corners of the rectangle and the angle where the two lines join are not changed. To change the style of lines where they join other lines, use the linejoin property.

This, again, is a string with three possible values. The default here is miter which creates a sharp corner where two lines join. Another option is bevel. This will chop off the corners giving them a straight beveled edge. Then finally there is round which, as I'm sure you can guess, gives you rounded corners. All pretty straightforward.

Now let's set linejoin back to miter. Note that where the two lines join that corner is cut off. If I move one of the points out so the angle isn't so severe, you see that the miter extends all the way out to a point. As I move that point back in, we'll continue to get a full corner. Note that the corner extends out further and further. With a very small angle that corner would extend out to a ridiculous degree. At some point, as you can see here, it gets chopped off.

We can control that chop off point with another property called miterlimit. You can adjust miterlimit to make it more aggressive in cutting corners or more lenient. The default value is 10. If I change that to 100, note that the corner is now left intact. Then I'll reduce it little by little. When I get back down to 10 the corner is cut down again.

In fact, if I set miterlimit down even lower, say to one, it even cuts off the corners of the square in the middle of the page. Again, these last three properties are not ones that you're likely to be using every day. But every now and then you'll need them, and you'll be glad that they're there.

Course

Learn HTML5 Graphics and Animation

Drawing Styles on HTML5 Canvas

Share this video with your friends