OffscreenCanvasRenderingContext2D

Zusätzliche Methoden

Die folgende Methode ist neu in der Schnittstelle OffscreenCanvasRenderingContext2D und existiert nicht in der Schnittstelle CanvasRenderingContext2D:

commit()

Überträgt das gerenderte Bild an das Platzhalter-Element <canvas> des OffscreenCanvas-Objekts des Kontexts.

Nicht unterstützte Funktionen

Die folgende Methode für die Benutzeroberfläche wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded()

Wenn ein bestimmtes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.

Geerbte Eigenschaften und Methoden

Die folgenden Eigenschaften und Methoden werden von CanvasRenderingContext2D geerbt. Sie werden genauso verwendet wie in CanvasRenderingContext2D.

Kontext

CanvasRenderingContext2D.getContextAttributes()

Gibt ein Objekt mit den tatsächlichen Kontextattributen zurück. Kontextattribute können mit OffscreenCanvas.getContext() angefordert werden.

CanvasRenderingContext2D.isContextLost()

Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Rechtecke zeichnen

CanvasRenderingContext2D.clearRect()

Setzt alle Pixel in dem Rechteck, das durch den Startpunkt (x, y) und die Größe (width, height) definiert ist, auf transparentes Schwarz und löscht damit zuvor gezeichnete Inhalte.

CanvasRenderingContext2D.fillRect()

Zeichnet ein ausgefülltes Rechteck an der Position (x, y), dessen Größe durch width und height bestimmt wird.

CanvasRenderingContext2D.strokeRect()

Zeichnet mit dem aktuellen Konturstil die Kontur eines Rechtecks mit dem Startpunkt (x, y), der Breite w und der Höhe h auf den Canvas.

Text zeichnen

Die folgenden Methoden und Eigenschaften steuern das Zeichnen von Text. Weitere Informationen zu Texteigenschaften finden Sie auch beim Objekt TextMetrics.

CanvasRenderingContext2D.fillText()

Zeichnet (füllt) einen angegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.strokeText()

Zeichnet die Kontur eines angegebenen Texts an der angegebenen Position (x, y).

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

CanvasRenderingContext2D.textRendering

Text-Rendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility,

Linienstile

Die folgenden Methoden und Eigenschaften steuern, wie Linien gezeichnet werden.

CanvasRenderingContext2D.lineWidth

Breite von Linien. Standardwert: 1.0.

CanvasRenderingContext2D.lineCap

Form der Linienenden. Mögliche Werte: butt (Standard), round, square.

CanvasRenderingContext2D.lineJoin

Definiert die Form der Ecken, an denen zwei Linien aufeinandertreffen. Mögliche Werte: round, bevel, miter (Standard).

CanvasRenderingContext2D.miterLimit

Grenzwert für Gehrungsverbindungen. Standardwert: 10.

CanvasRenderingContext2D.getLineDash()

Gibt das aktuelle Array des Strichmusters zurück, das eine gerade Anzahl nicht negativer Zahlen enthält.

CanvasRenderingContext2D.setLineDash()

Legt das aktuelle Strichmuster fest.

CanvasRenderingContext2D.lineDashOffset

Gibt an, an welcher Stelle einer Linie ein Strichmuster beginnen soll.

Textstile

Die folgenden Eigenschaften steuern das Layout von Text.

CanvasRenderingContext2D.font

Schrifteinstellung. Standardwert: 10px sans-serif.

CanvasRenderingContext2D.textAlign

Einstellung für die Textausrichtung. Mögliche Werte: start (Standard), end, left, right, center.

CanvasRenderingContext2D.textBaseline

Einstellung für die Ausrichtung an der Grundlinie. Mögliche Werte: top, hanging, middle, alphabetic (Standard), ideographic, bottom.

CanvasRenderingContext2D.direction

Schreibrichtung. Mögliche Werte: ltr, rtl, inherit (Standard).

CanvasRenderingContext2D.letterSpacing

Zeichenabstand. Standardwert: 0px.

CanvasRenderingContext2D.fontKerning

Unterschneidung der Schrift. Mögliche Werte: auto (Standard), normal, none.

CanvasRenderingContext2D.fontStretch

Schriftbreite. Mögliche Werte: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (Standard), semi-expanded, expanded, extra-expanded, ultra-expanded.

CanvasRenderingContext2D.fontVariantCaps

Großbuchstabenvariante der Schrift. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.

CanvasRenderingContext2D.textRendering

Text-Rendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.

CanvasRenderingContext2D.wordSpacing

Wortabstand. Standardwert: 0px

CanvasRenderingContext2D.lang

Ruft die Sprache des Canvas-Zeichenkontexts ab oder legt sie fest.

Füll- und Konturstile

Füllstile werden für Farben und Stile innerhalb von Formen verwendet, Konturstile für die Linien um Formen.

CanvasRenderingContext2D.fillStyle

Farbe oder Stil für das Innere von Formen. Standardwert: black.

CanvasRenderingContext2D.strokeStyle

Farbe oder Stil für die Linien um Formen. Standardwert: black.

Farbverläufe und Muster

CanvasRenderingContext2D.createConicGradient()

Erstellt einen konischen Farbverlauf um einen Punkt, dessen Koordinaten durch die Parameter angegeben werden.

CanvasRenderingContext2D.createLinearGradient()

Erstellt einen linearen Farbverlauf entlang der Linie, deren Koordinaten durch die Parameter angegeben werden.

CanvasRenderingContext2D.createRadialGradient()

Erstellt einen radialen Farbverlauf anhand der Koordinaten der beiden Kreise, die durch die Parameter angegeben werden.

CanvasRenderingContext2D.createPattern()

Erstellt ein Muster aus dem angegebenen Bild. Die Quelle wird in den Richtungen wiederholt, die durch das Wiederholungsargument angegeben werden. Diese Methode gibt ein CanvasPattern zurück.

Schatten

CanvasRenderingContext2D.shadowBlur

Gibt den Weichzeichnungseffekt an. Standardwert: 0.

CanvasRenderingContext2D.shadowColor

Farbe des Schattens. Standardwert: vollständig transparentes Schwarz.

CanvasRenderingContext2D.shadowOffsetX

Horizontaler Versatz des Schattens. Standardwert: 0.

CanvasRenderingContext2D.shadowOffsetY

Vertikaler Versatz des Schattens. Standardwert: 0.

Pfade

Mit den folgenden Methoden lassen sich die Pfade von Objekten bearbeiten.

CanvasRenderingContext2D.beginPath()

Beginnt einen neuen Pfad, indem die Liste der Teilpfade geleert wird. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.

CanvasRenderingContext2D.closePath()

Bewegt die Stiftspitze zurück zum Anfang des aktuellen Teilpfads. Dabei wird versucht, eine gerade Linie vom aktuellen Punkt zum Anfang zu zeichnen. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, bewirkt diese Funktion nichts.

CanvasRenderingContext2D.moveTo()

Verschiebt den Startpunkt eines neuen Teilpfads zu den Koordinaten (x, y).

CanvasRenderingContext2D.lineTo()

Verbindet den letzten Punkt des aktuellen Teilpfads durch eine gerade Linie mit den angegebenen Koordinaten (x, y).

CanvasRenderingContext2D.bezierCurveTo()

Fügt dem aktuellen Pfad eine kubische Bézierkurve hinzu.

CanvasRenderingContext2D.quadraticCurveTo()

Fügt dem aktuellen Pfad eine quadratische Bézierkurve hinzu.

CanvasRenderingContext2D.arc()

Fügt dem aktuellen Pfad einen Kreisbogen hinzu.

CanvasRenderingContext2D.arcTo()

Fügt dem aktuellen Pfad einen Bogen mit den angegebenen Kontrollpunkten und dem angegebenen Radius hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden ist.

CanvasRenderingContext2D.ellipse()

Fügt dem aktuellen Pfad einen elliptischen Bogen hinzu.

CanvasRenderingContext2D.rect()

Erstellt einen Pfad für ein Rechteck an der Position (x, y), dessen Größe durch width und height bestimmt wird.

CanvasRenderingContext2D.roundRect()

Erstellt einen Pfad für ein Rechteck mit abgerundeten Ecken an der Position (x, y), dessen Größe durch width und height und dessen Eckradien durch radii bestimmt werden.

Pfade zeichnen

CanvasRenderingContext2D.fill()

Füllt die aktuellen Teilpfade mit dem aktuellen Füllstil.

CanvasRenderingContext2D.stroke()

Zeichnet die Konturen der aktuellen Teilpfade mit dem aktuellen Konturstil.

CanvasRenderingContext2D.clip()

Erstellt aus den aktuellen Teilpfaden einen Clipping-Pfad. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Clipping-Pfads. Ein Beispiel finden Sie unter Clipping-Pfade im Canvas-Tutorial.

CanvasRenderingContext2D.isPointInPath()

Gibt an, ob sich der angegebene Punkt innerhalb des aktuellen Pfads befindet.

CanvasRenderingContext2D.isPointInStroke()

Gibt an, ob sich der angegebene Punkt innerhalb des Bereichs befindet, der durch das Zeichnen der Pfadkontur entsteht.

Transformationen

Objekte im CanvasRenderingContext2D-Rendering-Kontext verfügen über eine aktuelle Transformationsmatrix sowie über Methoden zu deren Bearbeitung. Die Transformationsmatrix wird angewendet, wenn der aktuelle Standardpfad erstellt oder Text, Formen und Path2D-Objekte gezeichnet werden. Die unten aufgeführten Methoden bleiben aus historischen Gründen und aus Kompatibilitätsgründen erhalten, da heutzutage in den meisten Teilen der API stattdessen DOMMatrix-Objekte verwendet werden und dies auch künftig der Fall sein wird.

CanvasRenderingContext2D.getTransform()

Ruft die aktuelle Transformationsmatrix ab, die auf den Kontext angewendet wird.

CanvasRenderingContext2D.rotate()

Fügt der Transformationsmatrix eine Drehung hinzu. Das Winkelargument gibt einen Drehwinkel im Uhrzeigersinn im Bogenmaß an.

CanvasRenderingContext2D.scale()

Fügt eine Skalierungstransformation der Canvas-Einheiten hinzu: horizontal um den Faktor x und vertikal um den Faktor y.

CanvasRenderingContext2D.translate()

Fügt eine Verschiebungstransformation hinzu, indem der Canvas und sein Ursprung im Koordinatensystem horizontal um x und vertikal um y verschoben werden.

CanvasRenderingContext2D.transform()

Multipliziert die aktuelle Transformationsmatrix mit der durch die Argumente beschriebenen Matrix.

CanvasRenderingContext2D.setTransform()

Setzt die aktuelle Transformation auf die Einheitsmatrix zurück und ruft anschließend die Methode transform() mit denselben Argumenten auf.

CanvasRenderingContext2D.resetTransform()

Setzt die aktuelle Transformation auf die Einheitsmatrix zurück.

Compositing

CanvasRenderingContext2D.globalAlpha

Alphawert, der auf Formen und Bilder angewendet wird, bevor sie mit dem Canvas zusammengesetzt werden. Standardwert: 1.0 (opak).

CanvasRenderingContext2D.globalCompositeOperation

Legt unter Berücksichtigung von globalAlpha fest, wie Formen und Bilder auf die vorhandene Bitmap gezeichnet werden.

Bilder zeichnen

CanvasRenderingContext2D.drawImage()

Zeichnet das angegebene Bild. Diese Methode ist in mehreren Varianten verfügbar und lässt sich daher sehr flexibel einsetzen.

Pixelbearbeitung

Siehe auch das Objekt ImageData.

CanvasRenderingContext2D.createImageData()

Erstellt ein neues, leeres ImageData-Objekt mit den angegebenen Abmessungen. Alle Pixel des neuen Objekts sind transparent schwarz.

CanvasRenderingContext2D.getImageData()

Gibt ein ImageData-Objekt zurück, das die zugrunde liegenden Pixeldaten für den Canvas-Bereich enthält, der durch ein Rechteck mit dem Startpunkt (sx, sy), der Breite sw und der Höhe sh festgelegt ist.

CanvasRenderingContext2D.putImageData()

Zeichnet Daten aus dem angegebenen ImageData-Objekt auf die Bitmap. Wenn ein Dirty Rectangle angegeben ist, werden nur die Pixel aus diesem Rechteck gezeichnet.

Bildglättung

CanvasRenderingContext2D.imageSmoothingEnabled

Bildglättungsmodus; ist er deaktiviert, werden Bilder beim Skalieren nicht geglättet.

CanvasRenderingContext2D.imageSmoothingQuality

Ermöglicht es Ihnen, die Qualität der Bildglättung festzulegen.

Der Canvas-Zustand

Der CanvasRenderingContext2D-Rendering-Kontext enthält verschiedene Zustände für Zeichenstile (Attribute für Linienstile, Füllstile, Schattenstile und Textstile). Die folgenden Methoden helfen Ihnen bei der Arbeit mit diesen Zuständen:

CanvasRenderingContext2D.save()

Speichert den aktuellen Zeichenstilzustand auf einem Stapel, sodass Sie Änderungen daran mit restore() rückgängig machen können.

CanvasRenderingContext2D.restore()

Stellt den Zeichenstilzustand wieder her, der zuletzt mit save() auf dem Zustandsstapel gespeichert wurde.

CanvasRenderingContext2D.canvas Schreibgeschützt

Eine Referenz auf ein OffscreenCanvas-Objekt.

CanvasRenderingContext2D.getContextAttributes()

Gibt ein Objekt mit den tatsächlichen Kontextattributen zurück. Kontextattribute können mit HTMLCanvasElement.getContext() angefordert werden.

CanvasRenderingContext2D.reset()

Setzt den aktuellen Zeichenstilzustand auf die Standardwerte zurück.

Filter

CanvasRenderingContext2D.filter

Wendet einen CSS- oder SVG-Filter auf den Canvas an, beispielsweise um dessen Helligkeit oder Unschärfe zu ändern.

Nicht unterstützte Eigenschaften und Methoden

Die folgende Methode wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded()

Wenn ein bestimmtes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.

Beispiel

Der folgende Codeausschnitt erstellt mithilfe des Konstruktors Worker() ein Worker-Objekt. Mit der Methode transferControlToOffscreen() wird aus dem <canvas>-Element ein OffscreenCanvas-Objekt abgerufen, damit es an den Worker übertragen werden kann:

const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

Im Worker-Thread können wir mit OffscreenCanvasRenderingContext2D auf die Bitmap des OffscreenCanvas-Objekts zeichnen:

onmessage = (event) => {
  const canvas = event.data.canvas;
  const offCtx = canvas.getContext("2d");
  // draw to the offscreen canvas context
  offCtx.fillStyle = "red";
  offCtx.fillRect(0, 0, 100, 100);
};

Ein vollständiges Beispiel finden Sie in unserem OffscreenCanvas-Worker-Beispiel (OffscreenCanvas-Worker ausführen).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLCanvasElement
• <canvas>