HTML Canvas - lineJoin Property

The HTML Canvas lineJoin property of Canvas API from the CanvasRenderingContext2D interface can be used set the shape joining two-line segments at their meeting point.

This does not generally affect the width, length of the lines as it does not extend further than the given input.

Possible input values

The values accepted by the lineJoin property are listed in the below table.

S.No	Value & Description	Sample Image
1	round It rounds off the corner of the shape.
2	bevel Fills a triangle at the endpoint between lines and a rectangular corners of the segment on other side.
3	miter The edges of two line segments are extended till they meet at a point. It is the default value for the property.

Example

The following program implements 'round' value style of the HTML Canvas lineJoin property to the line segments inside the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'round';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example

The following program implements 'bevel' value style of lineJoin property to the line segments inside the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'bevel';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example

The following program implements 'miter' line value style of lineJoin property to the line segments drawn inside the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.lineWidth = 15;
      context.lineJoin = 'miter';
      context.moveTo(50, 50);
      context.lineTo(100, 100);
      context.lineTo(150, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_lines.htm