JavaScript: The Definitive Guide, 5th Edition

Name

CanvasRenderingContext2D.lineJoin: specifies how vertices are rendered

Synopsis

String lineJoin

Description

When a path includes vertices where line segments and/or curves meet, the lineJoin property specifies how those vertices are drawn. The effect of this property is apparent only when drawing with wide lines.

The default value of the property is “miter”, which specifies that the outside edges of the two line segments are extended until they intersect. When two lines meet at an acute angle, mitered joins can become quite long. The miterLimit property places an upper bound on the length of a miter. Beyond this limit, the miter is beveled off.

The value “round” specifies that the outside edges of the vertex should be joined with a filled arc whose diameter is equal to the width of the line.

The value “bevel” specifies that the outside edges of the vertex should be joined with a filled triangle.

Bugs

Firefox 1.5 does not correctly implement beveled joins and renders them as rounded joins. Also, mitered joins are not displayed correctly when stroked in a partially transparent color.

See Also

CanvasRenderingContext2D.lineCap, CanvasRenderingContext2D.miterLimit