OffscreenCanvas: getContext() Methode

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die OffscreenCanvas.getContext() Methode gibt einen Zeichenkontext für ein Offscreen-Canvas zurück oder null, wenn der Kontextbezeichner nicht unterstützt wird oder das Offscreen-Canvas bereits auf einen anderen Kontextmodus gesetzt wurde.

Syntax

js
getContext(contextType, contextAttributes)

Parameter

contextType

Ein String, der den Kontextbezeichner enthält, der den dem Canvas zugeordneten Zeichenkontext definiert. Mögliche Werte sind:

2d

Erstellt ein OffscreenCanvasRenderingContext2D-Objekt, das einen zweidimensionalen Zeichenkontext darstellt.

webgl

Erstellt ein WebGLRenderingContext-Objekt, das einen dreidimensionalen Zeichenkontext darstellt. Dieser Kontext ist nur in Browsern verfügbar, die WebGL Version 1 (OpenGL ES 2.0) implementieren.

webgl2

Erstellt ein WebGL2RenderingContext-Objekt, das einen dreidimensionalen Zeichenkontext darstellt. Dieser Kontext ist nur in Browsern verfügbar, die WebGL Version 2 (OpenGL ES 3.0) implementieren.

"webgpu"

Erstellt ein GPUCanvasContext-Objekt, das einen dreidimensionalen Zeichenkontext für WebGPU-Renderpipelines darstellt. Dieser Kontext ist nur in Browsern verfügbar, die die WebGPU API implementieren.

bitmaprenderer

Erstellt ein ImageBitmapRenderingContext, das nur Funktionalität bietet, um den Inhalt des Canvas mit einem gegebenen ImageBitmap zu ersetzen.

Hinweis: Die Bezeichner "experimental-webgl" oder "experimental-webgl2" werden ebenfalls in Implementierungen von WebGL verwendet. Diese Implementierungen haben die Konformität mit der Testsuite noch nicht erreicht, oder die Grafiktreiber-Situation auf der Plattform ist noch nicht stabil. Die Khronos Group zertifiziert WebGL-Implementierungen unter bestimmten Konformitätsregeln.

contextAttributes

Sie können mehrere Kontextattribute verwenden, wenn Sie Ihren Zeichenkontext erstellen, zum Beispiel:

js
offscreen.getContext("webgl", { antialias: false, depth: false });

2d Kontextattribute:

alpha

Boolean, das angibt, ob das Canvas einen Alphakanal enthält. Wenn auf false gesetzt, weiß der Browser nun, dass der Hintergrund immer undurchsichtig ist, was das Zeichnen von transparenten Inhalten und Bildern beschleunigen kann.

willReadFrequently

Boolean, das angibt, ob viele Rückleseoperationen geplant sind. Dies wird die Verwendung einer Software- (statt einer hardwarebeschleunigten) 2D-Leinwand erzwingen und kann Speicher sparen, wenn getImageData() häufig aufgerufen wird. In Firefox ist diese Option nur verfügbar, wenn das Flag gfx.canvas.willReadFrequently.enable auf true gesetzt ist (was standardmäßig nur für B2G/Firefox OS der Fall ist).

WebGL Kontextattribute:

alpha

Boolean, das angibt, ob das Canvas einen Alphapuffer enthält.

depth

Boolean, das anzeigt, dass der Zeichenpuffer einen Tiefenpuffer von mindestens 16 Bit enthalten soll.

stencil

Boolean, das anzeigt, dass der Zeichenpuffer einen Stencelpuffer von mindestens 8 Bit enthalten soll.

antialias

Boolean, das angibt, ob Antialiasing durchgeführt werden soll, wenn möglich.

premultipliedAlpha

Boolean, das angibt, dass der Seitenkompositor davon ausgeht, dass der Zeichenpuffer Farben mit vorvervielfältigtem Alpha enthält.

preserveDrawingBuffer

Wenn der Wert wahr ist, werden die Puffer nicht gelöscht und behalten ihre Werte bei, bis sie gelöscht oder vom Autor überschrieben werden.

failIfMajorPerformanceCaveat

Boolean, das angibt, ob ein Kontext erstellt wird, wenn die Systemleistung niedrig ist.

Rückgabewert

Ein Zeichenkontext, der entweder ein

Wenn der Kontextbezeichner nicht unterstützt wird oder das Canvas bereits auf einen anderen Kontextmodus gesetzt wurde, wird null zurückgegeben.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das Canvas in einen anderen Kontextbereich übertragen wurde, zum Beispiel zu einem Worker.

Beispiele

js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

gl; // WebGLRenderingContext
gl.canvas; // OffscreenCanvas

Spezifikationen

Specification
HTML Standard
# dom-offscreencanvas-getcontext-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch