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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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:
