miterLimit Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:miterLimit

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. miterLimit

Description

The miterLimit property sets or gets the maximum miter length, which is the distance between the inner corner and the outer corner where two lines meet.

The miterLimit property works when the lineJoin attribute is "miter" and grows bigger as the angle of the corner gets smaller.

miterLimit Property's default value is 10.

JavaScript syntax 

context.miterLimit = number;

Property Values

Value Description
number A positive number to set the maximum miter length. If the miter length exceeds the miterLimit, the corner will display as lineJoin "bevel"

Example

The following code shows how to draw lines with the maximum miter length of 5:

Try to set the miterLimit to 4, and when the lines meet it will be displayed as lineJoin="bevel".

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" 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;// w  w w .  ja  va2s. c o m
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();

</script>

</body>
</html>

Related Tutorials