HTML5 Canvas Line Join
The "lineJoin" property defines how the point is drawn where two lines are connected. The point where two lines are connected is called the "line join". Unless specified, the HTML5 Canvas line join property is defaulted with the miter style.The lineJoin property can have the following values:
Miter
A Miter value results in a triangular corner being drawn for the line join.
Example of setting the line join:
ctx.lineJoin = "miter";
![miter.jpg]()
Bevel
The Bevel value results in a flat corner being drawn for the line join.
Example of setting the line join:
ctx.lineJoin = "bevel";
![bevel.jpg]()
Round
A Round value results in a round corner being drawn for the line join.
Example of setting the line join:
ctx.lineJoin = "round";
![round.jpg]()
Note: If your lines are fairly thin and don't connect at steep angles, it may be difficult to distinguish between the types of line joins.
In this example we will first set the line width for all the lines as in the following code:
ctx.lineWidth = "25";
Miter lineJoin in HTML5 we will do in the following code:
ctx.beginpath();
ctx.lineJoin = "miter";
ctx.moveTo(lStart + 400, yStart);
ctx.lineTo(lEnd + 400, yStart);
ctx.lineTo(lEnd + 400, yStart + 200);
ctx.stroke();
Bevel lineJoin in HTML5 can be done by the following code:
ctx.lineJoin = "bevel";
ctx.moveTo(lStart, yStart);
ctx.lineTo(lEnd, yStart);
ctx.lineTo(lEnd, yStart + 200);
ctx.stroke();
Round lineJoin in HTML5 can be performed by the following code:
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(lStart + 200, yStart);
ctx.lineTo(lEnd + 200, yStart);
ctx.lineTo(lEnd + 200, yStart + 200);
ctx.stroke();
Example of lineJoin property
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>LineJoin 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>
Output
![linejoin1.jpg]()
Creating Shape with lineJoin Property
To set the line join for a shape, we can set the "lineJoin" property when we instantiate the shape, or we can use the "setLineJoin()" method.
In this we apply the mouseover event to change the style.
In this example we will set the lineJoin on instantiation:
triangle.on('mouseout', function () {
this.setLineJoin('bevel');
layer.draw();
});
Now we set the lineJoin property after instantiation:
triangle.on('mouseover', function () {
this.setLineJoin('round');
layer.draw();
});
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var triangle = new Kinetic.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 3,
radius: 70,
fill: 'blue',
stroke: 'black',
strokeWidth: 20,
lineJoin: 'bevel'
});
triangle.on('mouseover', function () {
this.setLineJoin('round');
layer.draw();
});
triangle.on('mouseout', function () {
this.setLineJoin('bevel');
layer.draw();
});
// add the shape to the layer, and then the layer to stage
stage.add(layer.add(triangle));
</script>
</body>
</html>
Output
Before the mouseover event is applied we have:
![linejoin3.jpg]()
After the mouseover event is applied we have:
![join1.jpg]()