Tutorials References Exercises Videos Menu
Free Website Get Certified Pro

HTML canvas lineCap Property

❮ HTML Canvas Reference

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(200, 20);
ctx.stroke();
Try it Yourself »

Browser Support

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

Property
lineCap Yes 9.0 Yes Yes Yes

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 »

❮ HTML Canvas Reference