HTML canvas miterLimitProperty
Canvas ObjectExample
Draw a line with a maximum miter 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();
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();
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the miterLimit property.
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The miterLimit property sets or returns the maximum miter length.
The miter length refers to the distance between the inner corner and the outer corner where two lines meet.
Tip:The miterLimit is only effective when the lineJoin property is "miter".
The smaller the angle of the corner, the larger the miter length will be.
To avoid the miter lengthbeing too long, we can use the miterLimit property.
If the miter length exceeds the value of miterLimit, the corner will be displayed in the "bevel" type of lineJoin (Fig 3):
| Default value: | 10 |
|---|---|
| JavaScript syntax: | context.miterLimit=number; |
Property Value
| Value | Description |
|---|---|
| number | A positive number. Specifies the maximum miter length. If the miter length exceeds the value of miterLimit, the corner will be displayed in the "bevel" type of lineJoin. |
Other Extensions