Post
Ask Question

HTML5 Canvas LineJoin Property

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
  • bevel
  • round

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:
  1. ctx.beginpath();  
  2. ctx.lineJoin = "miter";  
  3. ctx.moveTo(lStart + 400, yStart);  
  4. ctx.lineTo(lEnd + 400, yStart);  
  5. ctx.lineTo(lEnd + 400, yStart + 200);  
  6. ctx.stroke(); 
Bevel lineJoin in HTML5 can be done by the following code:
  1. ctx.lineJoin = "bevel";  
  2. ctx.moveTo(lStart, yStart);  
  3. ctx.lineTo(lEnd, yStart);  
  4. ctx.lineTo(lEnd, yStart + 200);  
  5. ctx.stroke(); 
Round lineJoin in HTML5 can be performed by the following code:
  1. ctx.beginPath();  
  2. ctx.lineJoin = "round";  
  3. ctx.moveTo(lStart + 200, yStart);  
  4. ctx.lineTo(lEnd + 200, yStart);  
  5. ctx.lineTo(lEnd + 200, yStart + 200);  
  6. ctx.stroke(); 
Example of lineJoin property
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>LineJoin Example</title>  
  7.     <script type="text/javascript">  
  8.         function draw() {  
  9.             var canvas = document.getElementById("MyCanvas");  
  10.             if (canvas.getContext) {  
  11.                 // Draw some lines with different line joins.  
  12.                 var ctx = canvas.getContext("2d");  
  13.                 var lStart = 50;  
  14.                 var lEnd = 200;  
  15.                 var yStart = 50;  
  16.                 ctx.beginPath();  
  17.                 ctx.lineWidth = "25";  
  18.                 // Use a bevel corner.  
  19.                 ctx.lineJoin = "bevel";  
  20.                 ctx.moveTo(lStart, yStart);  
  21.                 ctx.lineTo(lEnd, yStart);  
  22.                 ctx.lineTo(lEnd, yStart + 200);  
  23.                 ctx.stroke();  
  24.                 // Use a round corner.              
  25.                 ctx.beginPath();  
  26.                 ctx.lineJoin = "round";  
  27.                 ctx.moveTo(lStart + 200, yStart);  
  28.                 ctx.lineTo(lEnd + 200, yStart);  
  29.                 ctx.lineTo(lEnd + 200, yStart + 200);  
  30.                 ctx.stroke();  
  31.                 // Use a miter.       
  32.                 ctx.beginPath();  
  33.                 ctx.lineJoin = "miter";  
  34.                 ctx.moveTo(lStart + 400, yStart);  
  35.                 ctx.lineTo(lEnd + 400, yStart);  
  36.                 ctx.lineTo(lEnd + 400, yStart + 200);  
  37.                 ctx.stroke();  
  38.                 // Annotate each corner.        
  39.                 addText("bevel", lStart + 50, yStart + 50, "blue");  
  40.                 addText("round", lStart + 250, yStart + 50, "blue");  
  41.                 addText("miter", lStart + 450, yStart + 50, "blue");  
  42.             }  
  43.             function addText(text, x, y, color) {  
  44.                 ctx.save(); // Save state of lines and joins  
  45.                 ctx.font = "400 16px/2 Unknown Font, sans-serif";  
  46.                 ctx.fillStyle = color;  
  47.                 ctx.fillText(text, x, y);  
  48.                 ctx.restore(); // restore state of lines and joins  
  49.             }  
  50.         }  
  51.     </script>  
  52. </head>  
  53. <body onload="draw();">  
  54.     <canvas id="MyCanvas" width="800" height="300"></canvas>  
  55. </body>  
  56. </html> 
Output
 
linejoin1.jpg
 

Creating Shape with lineJoin Property

 
To set the line join for 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:
  1. triangle.on('mouseout', function () {  
  2.             this.setLineJoin('bevel');  
  3.             layer.draw();  
  4.         }); 
Now we set the lineJoin property after instantiation:
  1. triangle.on('mouseover', function () {  
  2.             this.setLineJoin('round');  
  3.             layer.draw();  
  4.         }); 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <style>  
  6.         body {  
  7.             margin: 0px;  
  8.             padding: 0px;  
  9.         }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div id="container"></div>  
  14.     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>  
  15.     <script>  
  16.         var stage = new Kinetic.Stage({  
  17.             container: 'container',  
  18.             width: 578,  
  19.             height: 200  
  20.         });  
  21.         var layer = new Kinetic.Layer();  
  22.    
  23.         var triangle = new Kinetic.RegularPolygon({  
  24.             x: stage.getWidth() / 2,  
  25.             y: stage.getHeight() / 2,  
  26.             sides: 3,  
  27.             radius: 70,  
  28.             fill: 'blue',  
  29.             stroke: 'black',  
  30.             strokeWidth: 20,  
  31.             lineJoin: 'bevel'  
  32.         });  
  33.    
  34.         triangle.on('mouseover', function () {  
  35.             this.setLineJoin('round');  
  36.             layer.draw();  
  37.         });  
  38.    
  39.         triangle.on('mouseout', function () {  
  40.             this.setLineJoin('bevel');  
  41.             layer.draw();  
  42.         });  
  43.         // add the shape to the layer, and then the layer to stage  
  44.         stage.add(layer.add(triangle));  
  45.    
  46.     </script>  
  47. </body>  
  48. </html> 
Output
 
Before the mouseover event is applied we have
 
linejoin3.jpg
 
After the mouseover event is applied we have
 
join1.jpg


Similar Articles