Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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.

HTML Canvas 2D Context, Section 6Internet Explorer 9

Syntax

JavaScript

miterlimit = object.miterLimit

Property values

Type: number

10

Default. If not explicitly set, this value defaults to 10.

A positive number

Zero, negative numbers, infinite numbers, and not a number (NaN) values are ignored.

Standards information

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

CanvasRenderingContext2D
lineJoin

 

 

Show:
© 2014 Microsoft