Canvas lineJoin: miter, round and bevel Corner Styles

The Canvas lineJoin property controls the shape of the corner where two stroked path segments meet. It accepts three values: miter, round, and bevel. The default is miter.

Set lineJoin before calling stroke(). The effect is easiest to see with a thick line and a sharp change in direction.

Basic lineJoin example Top ↑

<canvas id="myCanvas" width="360" height="180"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 24;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(40, 140);
ctx.lineTo(180, 35);
ctx.lineTo(320, 140);
ctx.stroke();
</script>

lineJoin values Top ↑

Value	Corner shape
`miter`	Default. Extends the outside edges until they meet at a pointed corner. Sharp miters are limited by `miterLimit`.
`round`	Rounds the outside corner by adding a circular sector centered at the join. Its radius is half the line width.
`bevel`	Cuts off the outside corner with a straight edge between the outer edges of the two segments.

ctx.lineJoin = 'miter';
ctx.lineJoin = 'round';
ctx.lineJoin = 'bevel';

Visual comparison Top ↑

miter

bevel

round

With a thick stroke, the difference between the three joins is easy to see. A miter can extend far beyond the path at a sharp angle, while bevel clips that point and round smooths it.

Interactive lineJoin and lineWidth demo Top ↑

Change the line width and join type to see how the same path changes.

Line width: 40

lineJoin

miter

bevel

round

Selected: miter

How miterLimit affects miter joins Top ↑

When lineJoin = 'miter', very sharp corners can produce long pointed extensions. The miterLimit property limits that extension. If the miter exceeds the allowed ratio, the corner is rendered as a bevel instead.

ctx.lineWidth = 20;
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;

The default miterLimit is 10. It matters only when the current lineJoin is miter.

lineJoin vs lineCap Top ↑

lineJoin controls corners where connected segments meet. lineCap controls the open ends of a stroked subpath.

ctx.lineWidth = 18;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';

Using lineJoin with a path Top ↑

The join appears where consecutive path segments meet. The property can therefore affect straight segments, curves, arcs, and other stroked path geometry.

ctx.beginPath();
ctx.moveTo(40, 140);
ctx.lineTo(120, 40);
ctx.lineTo(200, 140);
ctx.lineTo(280, 40);
ctx.lineWidth = 16;
ctx.lineJoin = 'bevel';
ctx.stroke();

Common lineJoin mistakes Top ↑

Using values other than miter, round, or bevel.
Expecting lineJoin to change the ends of an open line. Use lineCap for line ends.
Setting lineJoin after calling stroke() and expecting already-drawn pixels to change.
Using a very thin line and then being unable to see the difference between join styles.
Assuming miterLimit affects round or bevel joins. It only applies to miter joins.

Accessibility note Top ↑

Canvas join styles are visual. If the corner shape communicates meaning, state, or data, provide the same information in accessible HTML text or another equivalent representation outside the bitmap drawing.

Frequently asked questions Top ↑

What is the default Canvas lineJoin? Top ↑

The default value is miter.

What values can lineJoin use? Top ↑

Use miter, round, or bevel.

Why does a miter corner sometimes look like a bevel? Top ↑

At very sharp angles, the miter may exceed the current miterLimit. Canvas then renders a bevel instead of allowing an excessively long miter.

Does lineJoin affect a single straight line? Top ↑

No visible join is added unless two non-zero-length path segments meet and change direction.

What is the difference between lineJoin and lineCap? Top ↑

lineJoin styles corners between connected segments; lineCap styles the open ends of a stroked subpath.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Canvas lineJoin: miter, round and bevel Corners