THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML

HTML canvas lineCap Property

Canvas Object Reference Canvas Object

Example

Draw a line with rounded end caps:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
lineCap 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The lineCap property sets or returns the style of the end caps for a line.

Note: The value "round" and "square" make the lines slightly longer.

Default value: butt
JavaScript syntax: context.lineCap="butt|round|square";

Property Values

Value Description Play it
butt Default. A flat edge is added to each end of the line Play it »
round A rounded end cap is added to each end of the line Play it »
square A square end cap is added to each end of the line Play it »

Canvas Object Reference Canvas Object