Line styles

When a path is stroked, it is drawn to the <canvas> using the current stroke and line styles. Lines can be drawn with different widths, cap and join styles, miter limit ratios, line dash patterns, and line dash offsets. These attributes are all stored as part of the 2D context’s drawing state.

Set and get the line width

To set the line width, use the context’s lineWidth attribute:

ctx.lineWidth = value;

The lineWidth attribute can also be used to get the current line width:

var currentLineWidth = ctx.lineWidth;

The lineWidth attribute is the width of lines in coordinate space pixels. The value must be greater than zero, and the default value is 1.0.

Example

Set and get the line cap style

To set the line cap style, use the context’s lineCap attribute:

ctx.lineCap = value;

The lineCap attribute can also be used to get the current line cap style:

var currentLineCapStyle = ctx.lineCap;

The lineCap attribute has three possible values: "butt", "round", and "square". When a line ends and the lineCap value is "butt", the line ends immediately at the endpoint; when the value is "round", the line is capped with a circle centered at the endpoint; and when the value is "square", the line is capped with a square centered at the endpoint. The default value is "butt".

Example

Set and get the line join style

To set the line join style, use the context’s lineJoin attribute:

ctx.lineJoin = value;

The lineJoin attribute can also be used to get the current line join style:

var currentLineJoinStyle = ctx.lineJoin;

The lineJoin attribute has three possible values: "bevel", "round", and "miter". When two lines are joined in a subpath and the lineJoin value is "miter", the corner has a pointed tip; when the value is "round", the tip is rounded off; and when the value is "bevel", the tip is beveled to a flat surface. The default value is "miter".

Example

Set and get the miter limit ratio

If two lines are joined in a subpath and the lineJoin value is "miter", the corner has a pointed tip. That tip gets longer as the angle between the two lines gets smaller. The miterLimit attribute limits the length of the tip, or miter, by setting a miter limit ratio.

ctx.miterLimit = value;

The miterLimit attribute can also be used to get the current miter limit ratio:

var currentMiterLimitRatio = ctx.miterLimit;

The miter limit ratio is the ratio of the maximum allowable miter length to half the line width. The value must be greater than zero, and the default value is 10.0.

If the lineWidth is 4 and the miterLimit is 10, then the maximum allowable miter length is 20. This means that any corner with a miter longer than 20 is automatically drawn using a "bevel" style line join instead of the current "miter" style line join.

Example

Set and get the line dash pattern

The 2D context has a dash list that it uses to draw dashed lines. Initially, the dash list is empty, but it can be set to contain an even number of positive non-zero numbers. The first number in the list is the length of the first dash in coordinate space pixels, the second number is the length of the first gap, the third number is the length of the second dash, and so on. When the context reaches the end of the dash list, it loops back and continues from the start of the list.

ctx.setLineDash([dash1, gap1, dash2, gap2, dash3, gap3]);

To set the dash list, pass the context’s setLineDash() function an array of lengths. If the array has an odd number of lengths, the setLineDash() function automatically combines two copies of the array to create an array with an even number of lengths. For example, if we pass the setLineDash() function the array [20, 10, 30], the array becomes [20, 10, 30, 20, 10, 30].

ctx.setLineDash([]);

The dash list can be emptied by passing the setLineDash() function an empty array.

var currentDashList = ctx.getLineDash();

To get a copy of the dash list, use the context’s getLineDash() function. This function returns an array containing the lengths stored in the dash list.

The dash list is supported in all modern web browsers except versions of Internet Explorer earlier than version 11.

Example

Set and get the line dash offset

By default, the value of the lineDashOffset attribute is 0.0 and the current path is drawn starting at the first dash in the dash list when stroked. However, the line dash pattern can be shifted by setting the lineDashOffset attribute to a new value. A positive value means that the current path starts at a later point in the line dash pattern; a negative value means that it starts at an earlier point in the line dash pattern.

ctx.lineDashOffset = value;

We can also get the value of the lineDashOffset attribute and store it in a variable.

var currentLineDashOffset = ctx.lineDashOffset;

The lineDashOffset attribute is not supported in Firefox and versions of Internet Explorer earlier than version 11.

Example