HTML Canvas - lineCap Property

The HTML Canvas lineCap property of Canvas API can be used to style the end points of lines drawn inside canvas element.

This property should be applied before drawing the line and is from the CanvasRenderingContext2D interface.

Possible input values

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

S.No	Value & Description	Sample Image
1	butt Ends of the line are squared off.
2	round Ends of the line are rounded.
3	square Ends of the line are boxed off with same thickness of the line.

Example

The following program implements 'butt' style of the HTML Canvas lineCap property to the line inside 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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'butt';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as &minud;

Example

The following program implements 'round' style of lineCap property to the line inside 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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'round';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

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

Example

The following program implements 'square' style of lineCap property to the line inside 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.moveTo(80, 30);
      context.lineTo(80, 120);
      context.lineWidth = 10;
      context.lineCap = 'square';
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

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

The butt style and square style looks similar, but the difference can be clearly observed in the 'possible input values' table.

html_canvas_lines.htm