lineJoin property

Gets or sets the type of corner that is created when two lines meet.

HTML Canvas 2D Context, Section 6

Syntax

JavaScript

sJoinStyle = object.lineJoin

Property values

Type: string

bevel

A filled triangle connects the two lines that are joined, creating a beveled corner.

round

A filled arc connects the two lines, creating a rounded corner.

miter

Default. The outside edges of the lines are continued until they intersect and the resulting triangle is filled, creating a sharp or pointed corner.

Standards information

Remarks

The miter option is affected by the miterLimit property.

Examples

The following code example draws three sets of adjoining lines by using the three styles of the lineJoin property. Try the example online.


<!DOCTYPE html> 
<html>
<head>
<title>lineJoin property example</title>
</head>
<body>
  <h1>lineJoin property example</h1>
  <canvas id="MyCanvas" width="800" height="300"> </canvas> 
    <script>     
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          // Draw some lines with different line joins.
          var ctx = canvas.getContext("2d");
          var lStart = 50;
          var lEnd = 200;
          var yStart = 50;
          ctx.beginPath();
          ctx.lineWidth = "25";
          // Use a bevel corner.
          ctx.lineJoin = "bevel";
          ctx.moveTo(lStart, yStart);
          ctx.lineTo(lEnd, yStart);
          ctx.lineTo(lEnd, yStart + 200);
          ctx.stroke();
          // Use a round corner.             
          ctx.beginPath();
          ctx.lineJoin = "round";
          ctx.moveTo(lStart + 200, yStart);
          ctx.lineTo(lEnd + 200, yStart);
          ctx.lineTo(lEnd + 200, yStart + 200);
          ctx.stroke();
          // Use a miter.      
          ctx.beginPath();
          ctx.lineJoin = "miter";
          ctx.moveTo(lStart + 400, yStart);
          ctx.lineTo(lEnd + 400, yStart);
          ctx.lineTo(lEnd + 400, yStart + 200);
          ctx.stroke();
          // Annotate each corner.       
          addText("bevel", lStart + 50, yStart + 50, "blue");
          addText("round", lStart + 250, yStart + 50, "blue");
          addText("miter", lStart + 450, yStart + 50, "blue");
        
     
        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
        }
      }
  </script>

</body>
</html> 


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft