Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | canvas lineWidth Property

  • Last Updated : 17 Jul, 2019

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!