miterLimit property
Gets or sets the maximum allowed ratio between half of the lineWidth value and the miter length. If the miter limit is too small then the two lines won't meet using the lineJoin you specify.
![]() ![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: number
-
Default. If not explicitly set, this value defaults to 10.
-
Zero, negative numbers, infinite numbers, and not a number (NaN) values are ignored.
Standards information
- HTML Canvas 2D Context, Section 6
Remarks
The miter length is the distance from the point where two lines meet to the point where two lines that are drawn along the outer edges of the two lines would intersect. If the ratio of these values exceeds the miterLimit value, a lineJoin miter style is not drawn.
Examples
This example shows two lines joined using the lineJoin miter attribute. The sliders let you change the angle, lineWidth, and miter limit of the two lines. As you change any of the values, you'll notice that the intersection appears mitered (pointed) or not to reflect the relationship between the three values. Try the example online.
<!DOCTYPE html> <html> <head> <title>miterLimit property example</title> <style> div { /* set up a frame around demo */ border:solid 2px blue; width:600px; } </style> </head> <body onload="doMiter();"> <div> <!-- Canvas and three range controls for parameters --> <canvas id="myCanvas" width="500" height="300"> </canvas><br /> <label><input type="range" min="1" max="10" id="miterlimit" /> Miter limit</label> <br/> <label><input type="range" min="5" max="75" id="angle" /> Angle</label> <br/> <label><input type="range" min="1" max="15" id="linewidth"/> Line width</label> </div> <script> // Global variables var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); } var y; // Pixels for left side of example var deg = 45; // Initial angle to use var lineWidth = 5; // Initial line width calcAngleLen(deg); // Calculate y from initial angle var miterValue = 5 // Set initial miter value var x1 = 20; // Constant x & y points to use var x2 = 220; var y2 = 20; function doMiter() { // Draw the figure // Clear old figure ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); // Start fresh path // Set line width, miter type, and draw the figure ctx.lineWidth = lineWidth; ctx.lineJoin = "miter"; ctx.miterLimit = miterValue; ctx.moveTo(x1, y2); ctx.lineTo(x2, (y + y2)/2); ctx.lineTo(x1, (y + y2)); ctx.stroke(); // Add text labels of current parameters addText("Miter limit: = " + miterValue, x2 + 40, y / 2 + 20, "blue"); addText("Angle: = " + deg + "%", x2 + 40, y / 2 + 40, "blue"); addText("Line width: = " + lineWidth, x2 + 40, y / 2 + 60, "blue"); } // Text drawing function function addText(text, x, y, color) { ctx.save(); // Save state of lines and joins ctx.font = "400 16px/2 Unknown Font, sans-serif"; ctx.fillStyle = color; ctx.fillText(text, x, y); ctx.restore(); // restore state of lines and joins } // Set initial value for miterLimit var slider = document.getElementById("miterlimit"); slider.value = miterValue; // Event handler for miterLimit value slider.addEventListener("change", function () { miterValue = parseInt(slider.value); doMiter(); }, false); // Set initial value angle var slider2 = document.getElementById("angle"); //slider2.value = calcAngleLen(deg); calcAngleLen(deg); slider2.value = deg; // Event handler for angle value slider2.addEventListener("change", function () { calcAngleLen(slider2.value); // Calculate left side of triangle doMiter(); // Redraw the figure }, false); // Set initial value for lineWidth var slider3 = document.getElementById("linewidth"); slider3.value = lineWidth; // Event handler for lineWidth value slider3.addEventListener("change", function () { lineWidth = slider3.value; doMiter(); }, false); // Calculate the value for the left side of the triangle function calcAngleLen(value) { deg = parseInt(value); var radians = deg * (Math.PI / 180); y = ((2 * (x2 - x1)) * Math.tan(radians / 2)); } // Do first call to display figure doMiter(); </script> </body> </html>
See also

