linejoin

Line join, sometimes written as linejoin, is a property in vector graphics that determines how the corner between two connected line segments is drawn when a stroke is applied along a path. It affects the appearance at each vertex where path segments meet and does not apply to filled areas.

The common join styles are:

- Miter: extends the outer edges of the segments until they meet, producing a pointed corner. This can create long spikes for acute angles.

- Bevel: cuts off the corner with a straight line, producing a flat, clipped join.

- Round: uses an arc to round off the corner for a smooth, curved transition.

Most systems implement a miter limit, which constrains how far the miter can extend relative to the stroke width. If the required miter exceeds the limit, the join is automatically converted to a bevel to prevent excessively long spikes. Some systems also provide a miter-clip option as an alternative behavior for extreme angles.

Usage in formats:

- SVG and CSS: the stroke-linejoin property selects among miter, bevel, round, and sometimes miter-clip, with miter being the default in many cases.

- Canvas 2D: the lineJoin property accepts the values 'miter', 'bevel', and 'round'.

Line join works on strokes and affects only the visible outline of a path, not its fill. It is commonly used to control the visual weight and readability of graphic elements, especially at corners of polylines and complex paths.