HTML Reference Manual

HTML tag大全

HTML canvas lineCap attribute

lineCap is a Canvas 2The lineCap property in Canvas D API specifies how each line segment's end is drawn. There are3possible values, respectively: butt, round and square. The default value is butt.

HTML canvas Reference Manual

Online Example

Draw three lines with (butt, round, square) caps:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas lineCap attribute usage (Basic Tutorial Website oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth =　10;
ctx.lineCap = "butt";
ctx.moveTo(20,}　20);
ctx.lineTo(200,　20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20,}　40);
ctx.lineTo(200,　40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20,}　60);
ctx.lineTo(200,　60);
ctx.stroke();
</script>
</body>
</html>

Test See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the lineCap property.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The lineCap property sets or returns the cap style of a line.

Note:"round" and "square" values will make the line slightly longer.

Default Value:	butt
JavaScript Syntax:	context.lineCap="butt\|round\|square";

Attribute Value

Value	Description
butt	Default. Add straight edges to each end of the line.
round	Add round line caps to each end of the line.
square	Add square line caps to each end of the line.

HTML canvas Reference Manual

HTML: <template> tag