Gets or sets the type of corner that is created when two lines meet.
.png){kind=icon}
.png){kind=icon} |
Syntax
| JavaScript | |
|---|
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
- 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.
<!DOCTYPE html>
<html>
<head>
<title>LineJoin property example</title>
<script type="text/javascript">
function draw() {
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>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="800" height="300"> </canvas>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
