HTML reference manual

HTML tag大全

HTML canvas miterLimit property

miterLimit is a Canvas 2D API sets the miter face limit ratio property. When getting the property value, it will return the current value (the default value is10.0 ). When assigning a value to the property, 0, negative numbers, Infinity, and NaN will be ignored; all others will be assigned a new value.

HTML canvas Reference Manual

Online example

Draw with the maximum miter length of20 line:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas miterLimit property usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<p>Attempt to set miterLimit　4(Then, the miter length will exceed the miter limit), when the line meets it will be displayed as lineJoin = 'bevel'.</p>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=20;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
</script>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, 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 attribute sets or returns the maximum miter length.

The miter length refers to the distance between the inner and outer angles at the intersection of two lines.

Tip:miterLimit is valid only when the lineJoin attribute is "miter".

The smaller the angle of the corner, the greater the miter length will be.

To avoid the miter lengthLong, we can use the miterLimit attribute.

If the miter length exceeds the value of miterLimit, the corner will be displayed with the lineJoin type "bevel" (Fig 3)

Default Value:	10
JavaScript 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 type "bevel".

HTML canvas Reference Manual

HTML: <template> tag