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
Get JavaScript: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.