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
context.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:
<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.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
Example
And now set the limit
with miterLimit:
<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.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
See also
-
the
lineCapproperty
that defines the type of a line end