lineJoin property
Gets or sets the type of corner that is created when two lines meet.
![]() ![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: string
-
A filled triangle connects the two lines that are joined, creating a beveled corner.
-
A filled arc connects the two lines, creating a rounded corner.
-
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
- HTML Canvas 2D Context, Section 6
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
Show:

