HTML Canvas - lineWidth Property

The HTML Canvas lineWidth property of Canvas 2D API can be used set the line thickness inside the Canvas element.

This property should be applied before drawing the line using context object and is available in the CanvasRenderingContext2D interface.

Possible input values

It accepts integer decimal number values which specifies the line width drawn inside the canvas element. The default value is taken as '1.0' by default.

Example

The following example demonstrates the HTML Canvas lineWidth property by drawing a line without applying lineWidth property and another lines with lineWidth property.

<!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(50, 10);
      context.lineTo(50, 110);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.lineWidth = 10;
      context.moveTo(100, 10);
      context.lineTo(100, 110);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.lineWidth = 15;
      context.moveTo(150, 10);
      context.lineTo(150, 110);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

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

Example

The following example demonstrates lineWidth property by drawing a triangle using lineWidth property to increase the thickness of the edges.

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

Output

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

Example

The following example demonstrates lineWidth property by drawing a diagonal to the rectangle with more thickness.

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

Output

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

html_canvas_lines.htm