HTML canvas miterLimit Property

Introduction

Draw lines with the maximum miter length of 5:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;/*from  w w  w. ja v a 2 s  . co m*/
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();
</script>

</body>
</html>

The miterLimit property sets or gets the maximum miter length.

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

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

The miter length grows bigger as the angle of the corner gets smaller.

To prevent the miter length from being too long, we can use the miterLimit property.

If the miter length exceeds the miterLimit value, the corner will be displayed as lineJoin type "bevel":

The miterLimit property Default value: 10 

context.miterLimit = number;

Property Values

Value Description
number A positive number that specifies the maximum miter length.



PreviousNext

Related