HTML5 Canvas Reference - miterLimit

The distance between the inner corner and the outer corner where two lines join is called miter length.

To prevent the miter length from being too large as the angle of the corner gets smaller, we can use the miterLimit property.

The miterLimit property sets or gets the maximum miter length.

The miterLimit property has effect only if the lineJoin attribute is "miter".

If the current miter length exceeds the miterLimit, the corner will display as lineJoin 'bevel'.

Browser compatibility


`miterLimit`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.miterLimit=number;

Property Values

Value	Description
number	Default value is 10. Set the maximum miter length.

Example

The following code sets the miter limit to 6.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.lineWidth = 10;<!--from w  ww  .ja va 2s .  co  m-->
    ctx.lineJoin = "miter";
    ctx.miterLimit = 6;
    ctx.moveTo(20, 20);
    ctx.lineTo(50, 40);
    ctx.lineTo(20, 100);
    ctx.stroke();

</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code sets the miter limit to 2. The miter length will exceed the miter limit, and the lines meet it will be displayed as lineJoin="bevel".


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.lineWidth = 10;<!--   w  w  w  .  j a v a  2  s  . c o m-->
    ctx.lineJoin = "miter";
    ctx.miterLimit = 6;
    ctx.moveTo(20, 20);
    ctx.lineTo(50, 40);
    ctx.lineTo(20, 100);
    ctx.stroke();

</script>

</body>
</html>

The code above is rendered as follows: