# lineJoin property

The `lineJoin` property specifies how two lines are joined. Can take the following values: `miter` - sharp corner (default), `round` - rounded corner, `bevel` - flat corner.

## Syntax

`context.lineJoin = 'miter', 'round' or 'bevel';`

## Example

We set the `lineJoin` property to `meter`:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 10; ctx.lineJoin = 'meter'; ctx.moveTo(50, 140); ctx.lineTo(100, 30); ctx.lineTo(150, 140); ctx.stroke();`

:

## Example

We set the `lineJoin` property to `round`:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 10; ctx.lineJoin = 'round'; ctx.moveTo(50, 140); ctx.lineTo(100, 30); ctx.lineTo(150, 140); ctx.stroke();`

:

## Example

We set the `lineJoin` property to `bevel`:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 10; ctx.lineJoin = 'bevel'; ctx.moveTo(50, 140); ctx.lineTo(100, 30); ctx.lineTo(150, 140); ctx.stroke();`

:

## See also

- the `miterLimit` property
  that sets the miter limit ratio
- the `lineCap` property
  that sets the type of a line end

← →
↑
en ru