The miterLimit property

The miterLimit property controls the sharpness of joining two lines when the lineJoin property is set to miter. How it controls: if the length of the corner is greater than the number specified in miterLimit, then the line join behaves as if lineJoin is set to bevel.

By default, miterLimit is 10. Less than 1 its value cannot be set.

Syntax

javascriptcontext.lineJoin = 'miter', 'round' or 'bevel';

Example

Now the lineJoin property is set to miter, but so far there are no restrictions, the angle is acute:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

Example

And now set the limit with miterLimit:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Результат:

See also