Skip to content
Related Articles

Related Articles

Improve Article

HTML | canvas lineWidth Property

  • Last Updated : 17 Jul, 2019
Geek Week

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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :