Skip to content
Related Articles

Related Articles

HTML | canvas lineCap Property

Improve Article
Save Article
  • Last Updated : 17 Jul, 2019
Improve Article
Save Article

The canvas lineCap property is used to set or return the style of end caps of line. The line can have one of three cap styles: butt, round, or square. The default value of canvas lineCap property are butt. The lineCap property must be set before calling the stroke() function.

Syntax:

context.lineCap = "butt|round|square";

Property Values:

  • butt: It is the default style. This property value adds the flat edge at the each end of the line.
  • round: This property value adds the end cap at the each end of the line.
  • square: This property value adds the square cap at the each end of the line.

Note: The value round and square makes the line slightly longer.

Example 1: This example illustrates the butt property value.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas lineCap Property
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1>GeeksforGeeks</h1>
      
    <h2>HTML canvas lineCap Property</h2>
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;">
    </canvas>
      
    <script>
        var canvas_id = document.getElementById("GFG");
        var context = canvas_id.getContext("2d");
          
        context.beginPath();
        context.lineWidth = 35;
        context.lineCap = "butt";
        context.moveTo(50, 100);
        context.lineTo(450, 100);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Output:

Example 2: This example illustrates the round property value.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas lineCap Property
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1>GeeksforGeeks</h1>
      
    <h2>HTML canvas lineCap Property</h2>
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;">
    </canvas>
      
    <script>
        var canvas_id = document.getElementById("GFG");
        var context = canvas_id.getContext("2d");
          
        context.beginPath();
        context.lineWidth = 35;
        context.lineCap = "round";
        context.moveTo(50, 100);
        context.lineTo(450, 100);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Output:

Example 3: This example illustrates the square property value.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas lineCap Property
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1>GeeksforGeeks</h1>
      
    <h2>HTML canvas lineCap Property</h2>
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;">
    </canvas>
      
    <script>
        var canvas_id = document.getElementById("GFG");
        var context = canvas_id.getContext("2d");
          
        context.beginPath();
        context.lineWidth = 35;
        context.lineCap = "square";
        context.moveTo(50, 100);
        context.lineTo(450, 100);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!