Open In App

HTML canvas lineWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1.

Syntax:

context.lineWidth = number;

Property Values:

  • number: This property value indicates the number which specifies the line width in terms of pixels. This property ignores the zero, negative, infinity, and NaN values.

Example 1:




<!DOCTYPE html>
<html>
  
<head
    <title
        HTML canvas lineWidth Property
    </title
</head
  
<body style = "text-align:center;">
      
    <h1 style="color:green"
        GeeksforGeeks 
    </h1
      
    <h2
        HTML canvas lineWidth() Property 
    </h2
  
    <canvas id="canvas" width="350" height="380"></canvas>
  
    <script>
        var canv = document.getElementById("canvas");
        var context = canv.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.moveTo(40, 40);
        context.lineTo(200, 150);
        context.lineTo(40, 200);
        context.strokeStyle = "green";
        context.stroke();
    </script>
</body>
  
</html>                    


Output:

Program 2:




<!DOCTYPE html>
<html>
  
<head
    <title
        HTML canvas lineWidth Property
    </title
</head
  
<body style = "text-align:center;">
      
    <h1 style="color:green"
        GeeksforGeeks 
    </h1
      
    <h2
        HTML canvas lineWidth() Property 
    </h2
  
    <canvas id="canvas" width="350" height="380"></canvas>
  
    <script>
        var canv = document.getElementById("canvas");
        var context = canv.getContext("2d");
        context.beginPath();
        context.lineWidth = 10;
        context.strokeStyle ="green";
        context.strokeRect(110, 40, 120, 100);
    </script>
</body>
  
</html>                    


Output:

Supported Browsers: The browser supported by HTML canvas lineWidth property are listed below:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads