# Свойство lineJoin

Свойство `lineJoin` задает способ объединения двух линий. Может принимать следующие значения: `miter` - острый угол (по умолчанию), `round` - скругленный угол, `bevel` - плоский угол.

## Синтаксис

`контекст.lineJoin = 'miter' или 'round' или 'bevel';`

## Пример

Установим свойство `lineJoin` в значение `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();`

:

## Пример

Установим свойство `lineJoin` в значение `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();`

:

## Пример

Установим свойство `lineJoin` в значение `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();`

:

## Смотрите также

- свойство `miterLimit`,
  которое ограничивает длину острого угла
- свойство `lineCap`,
  которое задает вид конца линии

←→
↑
en ru