HTML | canvas lineCap Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

Example 2: This example illustrates the round property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

Example 3: This example illustrates the square property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Recommended Posts:



    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.