CanvasRenderingContext2D.canvas — Eigenschaft · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.canvas

Beschreibung

Die Eigenschaft canvas eines CanvasRenderingContext2D liefert das HTMLCanvasElement, auf dem der Kontext zeichnet. Sie ist schreibgeschützt: Ein Kontext bleibt für seine gesamte Lebensdauer an genau ein Canvas-Element gebunden.

Nützlich ist sie vor allem dann, wenn eine Funktion nur den Kontext bekommt, aber Angaben zum Element braucht, z. B. width und height zum Leeren der Fläche, toDataURL() für den Export oder getBoundingClientRect() zum Umrechnen von Mauskoordinaten. So muss man nicht Kontext und Element gemeinsam durch den Code reichen.

Wichtig: Die Eigenschaft gibt das Element selbst zurück, keine Kopie. Wenn man ctx.canvas.width oder ctx.canvas.height ändert, wird die Zeichenfläche geleert und der Zustand des Kontexts (Transformation, fillStyle, Clipping usw.) zurückgesetzt.

Rückgabewert

Typ

HTMLCanvasElement

Beschreibung

Das Canvas-Element, zu dem der Kontext gehört. Bei einem OffscreenCanvasRenderingContext2D heißt die entsprechende Eigenschaft ebenfalls canvas, liefert dort aber ein OffscreenCanvas.

Beispiele

Canvas-Element über den Kontext abfragen

const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;
const ctx = canvas.getContext('2d');

console.log(ctx.canvas === canvas);
console.log(ctx.canvas.width, ctx.canvas.height);

true 300 150

Hilfsfunktion, die nur den Kontext braucht

// Leert die gesamte Fläche, ohne das Element extra zu übergeben
const clear = (ctx) => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
};

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

const render = () => {
  clear(ctx);
  ctx.fillStyle = 'tomato';
  ctx.fillRect(Math.random() * (ctx.canvas.width - 20), 50, 20, 20);
  requestAnimationFrame(render);
};
requestAnimationFrame(render);

Mauskoordinaten umrechnen und Bild exportieren

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

const toCanvasCoords = (ctx, event) => {
  const rect = ctx.canvas.getBoundingClientRect();
  return {
    x: (event.clientX - rect.left) * (ctx.canvas.width / rect.width),
    y: (event.clientY - rect.top) * (ctx.canvas.height / rect.height)
  };
};

ctx.canvas.addEventListener('click', (e) => {
  const { x, y } = toCanvasCoords(ctx, e);
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fill();
  console.log(ctx.canvas.toDataURL('image/png').slice(0, 22));
});

data:image/png;base64,

// Wichtig · Fallstricke

Schreibgeschützt: ctx.canvas = anderesCanvas hat keine Wirkung. Im Strict Mode wird ein TypeError geworfen, weil nur ein Getter existiert.
Größenänderung setzt zurück: Jede Zuweisung an ctx.canvas.width/height leert die Fläche und setzt den Kontextzustand zurück, auch wenn der Wert gleich bleibt. Zeichnen Sie danach neu und setzen Sie die Stile erneut.
CSS-Größe und Pixelgröße unterscheiden sich: ctx.canvas.width ist die Auflösung der Zeichenfläche in Pixeln, nicht die angezeigte Größe. Für hochauflösende Bildschirme skaliert man mit devicePixelRatio.
Sicherheit: Wurden Bilder von fremden Ursprüngen ohne CORS gezeichnet, ist das Canvas „tainted“. Dann werfen ctx.canvas.toDataURL() und toBlob() einen SecurityError.
Wird in allen modernen Browsern unterstützt. In Workern nutzt man OffscreenCanvas, dort liefert ctx.canvas ein OffscreenCanvas-Objekt.

Siehe auch

CanvasCaptureMediaStreamTrack.canvas CanvasRenderingContext2D.lang CanvasRenderingContext2D.font CanvasRenderingContext2D.lineCap CanvasRenderingContext2D.filter