CanvasRenderingContext2D.lineCap — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.lineCap

Beschreibung

Die Eigenschaft lineCap des 2D-Kontexts bestimmt die Form der Endpunkte, die bei stroke(), strokeRect() und strokeText() an den Enden offener Pfadabschnitte gezeichnet werden. Sie gehört zu den Linienstil-Eigenschaften, zusammen mit lineWidth, lineJoin und miterLimit.

Mögliche Werte:

"butt" (Standard): Die Linie endet genau am Endpunkt, flach abgeschnitten.
"round": Am Ende wird ein Halbkreis mit dem Durchmesser lineWidth angefügt.
"square": Am Ende wird ein Rechteck angefügt, das die Linie um die halbe lineWidth verlängert.

Die Eigenschaft wirkt nur auf offene Enden. Bei geschlossenen Pfaden (closePath()) entstehen keine Enden, dort bestimmt lineJoin das Aussehen der Ecken. Bei gestrichelten Linien (setLineDash()) wird der Linienabschluss auf jedes einzelne Strichsegment angewendet. Das eignet sich gut für gepunktete Linien mit runden Punkten.

Typische Einsatzfälle sind Zeichen-Apps (runde Pinselstriche mit "round"), Diagramme und Sparklines sowie pixelgenaue Grafiken, bei denen "butt" exakte Längen garantiert.

Parameter

Name	Typ	Default	Beschreibung
$value	"butt" \| "round" \| "square"	"butt"	Neuer Linienabschluss beim Setzen. Ungültige Werte werden stillschweigend ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Linienabschluss: "butt", "round" oder "square".

Beispiele

Alle drei Linienabschlüsse vergleichen

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

// Hilfslinien markieren Start- und Endpunkt
ctx.strokeStyle = '#09f';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(20, 140);
ctx.moveTo(180, 10);
ctx.lineTo(180, 140);
ctx.stroke();

const caps = ['butt', 'round', 'square'];
ctx.strokeStyle = '#000';
ctx.lineWidth = 20;

caps.forEach((cap, i) => {
  ctx.lineCap = cap;
  ctx.beginPath();
  ctx.moveTo(20, 30 + i * 45);
  ctx.lineTo(180, 30 + i * 45);
  ctx.stroke();
  console.log(ctx.lineCap);
});

butt round square

Runde Pinselstriche in einer Zeichen-App

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 12;
ctx.lineCap = 'round';   // weiche Strichenden
ctx.lineJoin = 'round';  // weiche Ecken
ctx.strokeStyle = 'crimson';

let drawing = false;

canvas.addEventListener('pointerdown', (e) => {
  drawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener('pointermove', (e) => {
  if (!drawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
});

canvas.addEventListener('pointerup', () => { drawing = false; });

Gepunktete Linie mit runden Punkten

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

ctx.lineWidth = 8;
ctx.lineCap = 'round';
// Strichlänge 0 + runde Kappe = kreisrunder Punkt
ctx.setLineDash([0, 16]);

ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(290, 50);
ctx.stroke();

Ungültige Werte werden ignoriert

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

console.log(ctx.lineCap); // Standardwert
ctx.lineCap = 'square';
ctx.lineCap = 'ROUND';   // Groß-/Kleinschreibung zählt: ungültig
ctx.lineCap = 'spitz';   // ungültig
console.log(ctx.lineCap);

butt square

// Wichtig · Fallstricke

Nur offene Enden: Bei closePath() oder strokeRect() sind keine Enden vorhanden. Dort wirkt lineJoin, nicht lineCap.
Länge ändert sich: Mit "round" und "square" ragt die Linie um lineWidth / 2 über die Endpunkte hinaus. Das beeinflusst Abstände, Kollisionsprüfungen und kann an den Rändern des Canvas zu Abschneiden führen.
Linien der Länge null: Mit "butt" wird bei einem Pfad der Länge null (z. B. moveTo und lineTo auf denselben Punkt) nichts gezeichnet. Mit "round" entsteht ein Punkt, mit "square" ein Quadrat.
Gestrichelte Linien: Die Kappe wird auf jedes Strichsegment von setLineDash() angewendet. Bei "square"/"round" sind die Lücken deshalb optisch kleiner als angegeben.
Zustand: lineCap gehört zum Zeichenzustand und wird mit save()/restore() gesichert bzw. wiederhergestellt. Ungültige Werte (auch in falscher Groß-/Kleinschreibung) werden ohne Fehlermeldung ignoriert.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch von OffscreenCanvasRenderingContext2D und Path2D-Konturen mit stroke(path).

Siehe auch

CanvasRenderingContext2D.lineJoin CanvasRenderingContext2D.lineWidth CanvasRenderingContext2D.miterLimit CanvasRenderingContext2D.setLineDash() CanvasRenderingContext2D.stroke() CanvasRenderingContext2D CanvasRenderingContext2D.lang