Web/API/CanvasRenderingContext2D/lineJoin

The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.

This property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case. Degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored.

Note: Lines can be drawn with the stroke(), strokeRect(), and strokeText() methods.

Syntax

ctx.lineJoin = "bevel" || "round" || "miter";

Options

There are three possible values for this property: "round", "bevel", and "miter". The default is "miter".

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/237/2b7a14b3921934ae35486afd6ba6704a/Canvas_linejoin.png]]

"round": Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
"bevel": Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
"miter": Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the miterLimit property. Default value.

Examples

Changing the joins in a path

This example applies rounded line joins to a path.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 20;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

Result

Comparison of line joins

The example below draws three different paths, demonstrating each of the three lineJoin options.

<canvas id="canvas" width="150" height="150"></canvas>

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;

for (let i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
}

Screenshot	Live sample
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/237/2b7a14b3921934ae35486afd6ba6704a/Canvas_linejoin.png\|class=internal]]

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'CanvasRenderingContext2D.lineJoin' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`lineJoin`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1.5	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support

WebKit/Blink-specific notes

In WebKit- and Blink-based Browsers, a non-standard and deprecated method ctx.setLineJoin() is implemented in addition to this property.