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.
Output:
👁 Image
Example 2: This example illustrates the round property value.
Output:
👁 Image
Example 3: This example illustrates the square property value.
Output:
👁 Image
