--- title: CanvasRenderingContext2D.lineCap slug: Web/API/CanvasRenderingContext2D/lineCap translation_of: Web/API/CanvasRenderingContext2D/lineCap ---
{{APIRef}}
Canvas 2D APIのCanvasRenderingContext2D.lineCap プロパティは、描線の端点の形状を設定します。

Note: 描線は {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、 {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}、 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} のメソッドで行われます。

Syntax

ctx.lineCap = "butt" || "round" || "square";

Options

"butt"
端点は四角く切られます。デフォルト値です。
"round"
端点は丸くなります。
"square"
端点に線幅と同じ幅で高さが半分の四角形が描き加えられます。

Examples

線の先端の形を変える

この例では直線の端点を丸めています。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();

Result

{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}

先端形状の比較

次の例では、lineCap プロパティがそれぞれ異なる3本の線を描画しています。その違いを観察するために、2本の補助線を引いています。3本の線はそれぞれこの補助線直上を始点および終点として描かれています。

左の線はデフォルトのオプション "butt" の場合の描線で、補助線のところで丁度切れています。2つ目の"round" オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の"square" オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lineCap = ['butt', 'round', 'square'];

// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = 'black';
for (let i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
}

{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} {{Spec2('HTML WHATWG')}}

Browser compatibility

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

See also