HTML canvas miterLimit attribute
Definition and Usage
miterLimit Property settings 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:Only when the lineJoin attribute is "miterThe miterLimit is effective only when the lineJoin attribute is "
The smaller the angle of the corner, the longer the bevel length will be.
To avoid a too long bevel length, we can use the miterLimit attribute.
If the bevel length exceeds the value of miterLimit, the corners will be rounded with the lineJoin attribute "bevelType "
Example
Draw lines 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 miter length. If the miter length exceeds the value of miterLimit, the corner will be displayed with the lineJoin "bevel" type. |
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.
