Setting the Line Style

We recently started discussing how to access the canvas from JavaScript. Before you begin drawing however, you can set the line style by using properties of the context object.

The line style properties available for the graphics context are:

lineWidth

The thickness (in pixels) of the line. The default value is 1.

strokeStyle

The style of stroke you would like to use. This can be a color, a gradient, or a pattern. The default value is #000000 (black).

lineCap

A string specifying the end caps to use for the line. The value can be one of butt, round, or square. The default value is butt.

lineJoin

A string specifying the type of joints between connecting lines. The value can be one of bevel, round or miter The default value is miter.

miterLimit

When the lineJoin property is set to miter you have the option of setting a miter limit. The default value is 10. The miter limit is the distance between the inner and outer corner when two lines meet.

You can set the various line style properties at any time. For example, you can set the line style to a purple 20 pixel wide line, draw a line segment, set the line style to orange and a width of 30 pixels, draw another segment and so on.