OffscreenCanvasRenderingContext2D

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.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die OffscreenCanvasRenderingContext2D-Schnittstelle ist ein CanvasRenderingContext2D-Rendering-Kontext zum Zeichnen auf die Bitmap eines OffscreenCanvas-Objekts. Sie ähnelt dem CanvasRenderingContext2D-Objekt mit den folgenden Unterschieden:

  • es gibt keine Unterstützung für Benutzeroberflächenfunktionen (drawFocusIfNeeded)
  • das canvas-Attribut verweist auf ein OffscreenCanvas-Objekt anstelle eines <canvas>-Elements
  • die Bitmap des Platzhalter-<canvas>-Elements, das zum OffscreenCanvas-Objekt gehört, wird während des Rendering-Updates des Window oder Worker, das den OffscreenCanvas besitzt, aktualisiert

Beispiel

Der folgende Codeausschnitt erstellt ein Worker-Objekt unter Verwendung des Worker()-Konstruktors. Die Methode transferControlToOffscreen() wird verwendet, um ein OffscreenCanvas-Objekt aus dem <canvas>-Element zu erhalten, sodass es an den Worker übertragen werden kann:

js
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 die OffscreenCanvasRenderingContext2D verwenden, um auf die Bitmap des OffscreenCanvas-Objekts zu zeichnen:

js
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).

Zusätzliche Methoden

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

commit() Veraltet Nicht standardisiert

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

Nicht unterstützte Funktionen

Die folgende Benutzeroberflächenmethode wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded()

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

Geerbte Eigenschaften und Methoden

Die folgenden Eigenschaften und Methoden werden von CanvasRenderingContext2D geerbt. Sie haben die gleiche Verwendung wie in CanvasRenderingContext2D.

Kontext

CanvasRenderingContext2D.isContextLost()

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

Rechtecke zeichnen

CanvasRenderingContext2D.clearRect()

Setzt alle Pixel im durch den Ausgangspunkt (x, y) und die Größe (width, height) definierten Rechteck auf transparentes Schwarz und löscht dabei alle zuvor gezeichneten Inhalte.

CanvasRenderingContext2D.fillRect()

Zeichnet ein gefülltes Rechteck an der Position (x, y) mit einer durch width und height bestimmten Größe.

CanvasRenderingContext2D.strokeRect()

Zeichnet ein Rechteck, das einen Ausgangspunkt bei (x, y) hat und eine Breite w sowie eine Höhe h aufweist, auf den Canvas unter Verwendung des aktuellen Strichstils.

Text zeichnen

Die folgenden Methoden und Eigenschaften steuern das Zeichnen von Text. Siehe auch das TextMetrics-Objekt für Texteigenschaften.

CanvasRenderingContext2D.fillText()

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

CanvasRenderingContext2D.strokeText()

Zeichnet (strichelt) einen angegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

CanvasRenderingContext2D.textRendering

Textrendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility.

[...]

Spezifikationen

Specification
HTML
# the-offscreen-2d-rendering-context

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
OffscreenCanvasRenderingContext2D
arc
arcTo
beginPath
bezierCurveTo
canvas
clearRect
clip
closePath
commit
DeprecatedNon-standard
createConicGradient
createImageData
createLinearGradient
createPattern
createRadialGradient
direction
drawImage
ellipse
fill
fillRect
fillStyle
fillText
filter
font
fontKerning
fontStretch
fontVariantCaps
getContextAttributes
Experimental
getImageData
getLineDash
getTransform
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
isContextLost
isPointInPath
isPointInStroke
letterSpacing
lineCap
lineDashOffset
lineJoin
lineTo
lineWidth
measureText
miterLimit
moveTo
putImageData
quadraticCurveTo
rect
reset
resetTransform
restore
rotate
roundRect
save
scale
setLineDash
setTransform
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
stroke
strokeRect
strokeStyle
strokeText
textAlign
textBaseline
textRendering
transform
translate
wordSpacing

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

Siehe auch