構文

context . lineCap [ = value ]

現在のライン・キャップ・スタイルを返します。

値をセットして、ライン・キャップ・スタイルを変更することができます。

利用可能なライン・キャップ・スタイルは、butt, round, square です。それ以外の値は無視されます。

仕様

lineCap 属性は、ユーザーエージェントが線の端に置く終端のタイプを定義します。butt, round, square の 3 つの値が妥当な値として利用可能です。butt を指定すると、線の両端が線の方向に対して垂直でフラットなエッジとなります（ライン・キャップが加えられることはありません）。round を指定すると、直径が線の幅と同じとなる半円が、線の両端に追加されます。square を指定すると、線の幅と同じ長さで、線の半分の幅となる矩形が、線の両端に、線の方向に垂直なエッジに対してフラットに配置されます。

取得時には、現在の値が返されなければいけません。セット時には、新しい値がリテラル文字列の butt, round, square のいずれかなら、現在の値が、その新しい値に変更されなければいけません。それ以外の値なら無視され、値は変更されてはいけません。

コンテキストが生成されるとき、lineCap 属性は値 butt で初期化されなければいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-linecap

サンプル

このサンプルは、左から順に、butt, round, square を lineCap プロパティにセットした線を描いたものです。lineCap の特性が分かりやすいよう、各線の両端に赤色の横線を引きました。

butt （デフォルト）を指定すると、横線から線がはみ出しません。しかし、round, square を指定すると、線の幅の半分の長さ分だけ、横線をはみ出すことに注目してください。そのはみ出した部分は、round が指定された時には半円が、square が指定されたときには矩形が描かれます。

/* 線の幅を定義 */
ctx.lineWidth = 20;
/* buttの例 */
ctx.beginPath();
ctx.lineCap = "butt";
ctx.moveTo(25, 20);
ctx.lineTo(25, 80);
ctx.stroke();
/* roundの例 */
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(50, 20);
ctx.lineTo(50, 80);
ctx.stroke();
/* squareの例 */
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(75, 20);
ctx.lineTo(75, 80);
ctx.stroke();
/* 補助線1 */
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.moveTo(10, 20);
ctx.lineTo(90, 20);
ctx.stroke();
/* 補助線2 */
ctx.beginPath();
ctx.moveTo(10, 80);
ctx.lineTo(90, 80);
ctx.stroke();

[lineCap プロパティの実際のサンプル]

ブラウザ対応状況