Canvas miterLimit: Control Sharp miter line joins

The Canvas miterLimit property controls how far a sharp miter join is allowed to extend. It matters only when lineJoin is set to miter. If a corner would create a miter longer than the allowed ratio, Canvas renders that corner as a bevel instead.

The default miterLimit is 10. The value must be at least 1.

Basic miterLimit example Top ↑

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

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

ctx.lineWidth = 40;
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.beginPath();
ctx.moveTo(70, 190);
ctx.lineTo(180, 35);
ctx.lineTo(290, 190);
ctx.stroke();
</script>

What miterLimit measures Top ↑

A miter join is formed by extending the outside edges of two connected stroked segments until they meet. As the angle between the segments becomes sharper, that pointed extension becomes longer.

miterLimit sets the maximum allowed ratio between the miter length and the line width. When the required ratio exceeds the limit, the join is drawn as a bevel. This is why there is no universal rule such as “a value below 3 always produces a bevel”: the result depends on the angle of the path.

Canvas miterLimit showing a sharp miter line join

Interactive miterLimit demo Top ↑

Move the slider to change miterLimit. At lower values the sharp corner may switch from a miter to a bevel; at higher values the pointed miter is allowed to extend farther.

miterLimit: 4

The path angle is fixed so you can see where this particular corner changes between a miter and bevel.

Default and valid values Top ↑

The default value is 10. Use a finite number of 1 or greater. Values below 1, zero, negative numbers, Infinity, and NaN are ignored.

ctx.lineJoin = 'miter';
ctx.miterLimit = 10; // default
ctx.miterLimit = 4;  // shorter miters allowed
ctx.miterLimit = 1;  // effectively prevents pointed miters

miterLimit works only with lineJoin="miter" Top ↑

Changing miterLimit has no visible effect when lineJoin is round or bevel.

ctx.lineJoin = 'miter';
ctx.miterLimit = 3;

// miterLimit does not control these join styles:
ctx.lineJoin = 'round';
ctx.lineJoin = 'bevel';

Relationship with lineWidth and corner angle Top ↑

The visual length of a miter also changes with lineWidth. However, miterLimit itself is a ratio, which makes it useful across different stroke widths. The sharper the corner, the larger the ratio required to preserve the pointed miter.

ctx.lineWidth = 30;
ctx.lineJoin = 'miter';
ctx.miterLimit = 5;
ctx.strokeStyle = '#2457a6';

When to change miterLimit Top ↑

Lower it when sharp path corners create long spikes that do not suit the design.
Raise it when deliberately sharp pointed corners are being clipped to bevels.
Leave the default when the normal miter behavior already looks correct.
Use round or bevel line joins when you do not want pointed miters at all.

Common miterLimit mistakes Top ↑

Using the misspelled property miterLImit. JavaScript is case-sensitive; use miterLimit.
Assuming one threshold such as 3 applies to every path. The cutoff depends on the corner angle.
Expecting miterLimit to affect round or bevel joins.
Setting a value below 1 and expecting it to be applied.
Changing the property after stroke() and expecting already-rendered pixels to update.

Accessibility note Top ↑

miterLimit changes only the visual rendering of Canvas strokes. If line shape, color, or geometry conveys information, provide the same meaning in accessible HTML text or another equivalent representation outside the Canvas bitmap.

Frequently asked questions Top ↑

What is the default Canvas miterLimit? Top ↑

The default value is 10.

What is the minimum valid miterLimit? Top ↑

The value must be at least 1.

Why does my miter join become a bevel? Top ↑

The corner requires a miter ratio greater than the current miterLimit, so Canvas clips the pointed join to a bevel.

Does miterLimit affect round joins? Top ↑

No. It is used only with lineJoin = 'miter'.

Does a lower miterLimit always mean a bevel? Top ↑

No. Whether the join changes to a bevel depends on the angle between the connected path segments and the required miter ratio.

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 miterLimit: Limit Sharp Miter Joins