HTML canvas lineCap Property
Example
// Accessing the element
let c = document.getElementById("myCanvas");
// Styling canvas
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(25, 25);
ctx.lineTo(100, 100);
ctx.stroke();
Meaning
The lineCap canvas property sets or returns the style of the end caps for a line.
Note: The value "round" and "square" make the lines slightly longer.
Standard Syntax
Default value:
butt
JavaScript syntax:
context.lineCap="butt|round|square";
Advertisement
Property Values
| Value | Description |
|---|---|
| butt | Default. Specifies a flat edge is added to each end of the line. |
| round | Specifies a rounded end cap is added to each end of the line. |
| square | Specifies a square end cap is added to each end of the line. |