CanvasRenderingContext2D.lineJoin — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.lineJoin

Beschreibung

Die Eigenschaft lineJoin des 2D-Kontexts legt fest, wie die Ecke aussieht, an der zwei verbundene Segmente eines Pfads aufeinandertreffen. Sie wirkt beim Zeichnen mit stroke(), strokeRect() und strokeText() und ist vor allem bei dicken Linien (lineWidth größer als 1) gut zu sehen.

Mögliche Werte:

"miter" (Standard): Die Außenkanten der Segmente werden verlängert, bis sie sich treffen. So entsteht eine spitze Ecke. Wie weit die Spitze höchstens hinausragen darf, bestimmt miterLimit.
"round": Die Ecke wird mit einem Kreisbogen abgerundet, dessen Durchmesser der Linienbreite entspricht.
"bevel": Die Ecke wird gerade abgeschnitten. Dabei füllt ein Dreieck die Lücke zwischen den Außenecken der Segmente.

lineJoin betrifft nur Verbindungen innerhalb eines zusammenhängenden Pfads, also zwischen aufeinanderfolgenden lineTo()- oder Kurvenaufrufen, und die Schlussecke bei closePath(). Wie offene Linienenden aussehen, steuert stattdessen lineCap. Weil die Eigenschaft zum Zeichenzustand gehört, lässt sie sich mit save() und restore() sichern und wiederherstellen.

Parameter

Name	Typ	Default	Beschreibung
$value	"miter" \| "round" \| "bevel"	"miter"	Die Form der Verbindung beim Zuweisen. Ungültige Werte werden ohne Fehlermeldung ignoriert.

Rückgabewert

Typ

string

Beschreibung

Beim Lesen der aktuelle Wert: "miter", "round" oder "bevel".

Beispiele

Alle drei Verbindungsformen im Vergleich

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 16;
ctx.strokeStyle = '#2a6df4';

['miter', 'round', 'bevel'].forEach((join, i) => {
  const x = 30 + i * 110;
  ctx.lineJoin = join;
  ctx.beginPath();
  ctx.moveTo(x, 120);
  ctx.lineTo(x + 40, 30);
  ctx.lineTo(x + 80, 120);
  ctx.stroke();
});

console.log(ctx.lineJoin);

bevel

Ungültige Werte werden ignoriert

const ctx = document.createElement('canvas').getContext('2d');
console.log(ctx.lineJoin);      // Standardwert
ctx.lineJoin = 'round';
ctx.lineJoin = 'spitz';         // ungültig, wird ignoriert
console.log(ctx.lineJoin);

miter round

Weiche Linien für ein Diagramm mit save/restore

const ctx = document.querySelector('#chart').getContext('2d');
const data = [40, 90, 30, 110, 60, 100];

ctx.save();
ctx.lineWidth = 6;
ctx.lineJoin = 'round';   // keine spitzen Zacken an Ausreißern
ctx.lineCap = 'round';
ctx.strokeStyle = 'crimson';
ctx.beginPath();
data.forEach((v, i) => {
  const x = 20 + i * 50;
  const y = 140 - v;
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.stroke();
ctx.restore();

console.log(ctx.lineJoin); // wieder der vorherige Wert

miter

// Wichtig · Fallstricke

Bei "miter" können sehr spitze Winkel extrem lange Spitzen erzeugen. Überschreitet das Verhältnis aus Spitzenlänge und halber Linienbreite den Wert von miterLimit (Standard 10), wird die Ecke automatisch wie bei "bevel" abgeschnitten.
Getrennte Teilpfade, also nach einem erneuten moveTo(), werden nicht verbunden. Dort gilt lineCap. Ein Rechteck aus vier lineTo()-Aufrufen ohne closePath() hat an der Startecke zwei Linienenden statt einer Verbindung.
Bei lineWidth = 1 ist der Unterschied zwischen den Werten kaum zu sehen.
Die Eigenschaft wird in allen modernen Browsern unterstützt. Sie funktioniert genauso in OffscreenCanvasRenderingContext2D und für Path2D-Objekte, die mit ctx.stroke(path) gezeichnet werden.

Siehe auch

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