HTML canvas lineCap Property
Last Updated :
09 Jun, 2023
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:
Share your thoughts in the comments
Please Login to comment...