HTML canvas lineCap Property

❮ HTML canvas Reference

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";



Browser Support




Status







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.
❮ HTML canvas Reference