Canvas miterLimit attribute
Definition and usage
miterLimit Sets or returns the maximum bevel length.
The bevel length refers to the distance between the inner and outer angles at the intersection of two lines.
Tip:is the lineJoin attribute set to 'miterOnly when '
The smaller the angle of the corner, the longer the bevel length will be.
To avoid the bevel length being too long, we can use the miterLimit attribute.
If the bevel length exceeds the value of miterLimit, the corners will be displayed with the 'bevelDisplayed with the '
Example
Draw a line with the maximum bevel length of 5:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
Syntax
context.miterLimit=number;
Attribute value
| Value | Description |
|---|---|
| number |
Positive number. Specifies the maximum bevel length. If the bevel length exceeds the value of miterLimit, the corners will be displayed with the 'bevel' type of lineJoin. |
Technical Details
| Default Value: | 10 |
|---|
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
