Signatur
Beschreibung
commit() war Teil früher Entwürfe der OffscreenCanvas-API. Die Methode sollte den aktuellen Inhalt eines OffscreenCanvasRenderingContext2D auf das Platzhalter-Canvas übertragen, also auf das <canvas>-Element im Dokument, von dem das OffscreenCanvas per transferControlToOffscreen() abgeleitet wurde. Vor allem in Web Workern war das gedacht, um ein fertig gezeichnetes Bild gezielt „abzuschicken“.
Die Methode wurde aus dem HTML-Standard entfernt. Heute überträgt der Browser den Inhalt eines per transferControlToOffscreen() erzeugten OffscreenCanvas automatisch, sobald der aktuelle Task im Worker bzw. im Hauptthread endet. Für flüssige Animationen verwendet man im Worker requestAnimationFrame(), das in Dedicated Workern verfügbar ist.
Wer Bitmaps ausdrücklich weitergeben will, etwa ohne Platzhalter-Canvas, nimmt OffscreenCanvas.transferToImageBitmap() und zeigt das Ergebnis mit ImageBitmapRenderingContext.transferFromImageBitmap() an. In neuem Code sollte man commit() nicht mehr aufrufen. Höchstens bei der Pflege von Altcode prüft man vorher, ob die Methode vorhanden ist.
Rückgabewert
undefined). In aktuellen Browsern ist die Methode nicht vorhanden. Ein Aufruf löst dort einen TypeError aus.Beispiele
Vorhandensein prüfen (Altcode absichern)
const offscreen = new OffscreenCanvas(200, 100);
const ctx = offscreen.getContext('2d');
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, 200, 100);
// Früher: ctx.commit(); – heute nur noch mit Prüfung aufrufen
if (typeof ctx.commit === 'function') {
ctx.commit();
} else {
console.log('commit() nicht verfügbar – Übertragung erfolgt automatisch');
}Moderner Ersatz: Zeichnen im Worker ohne commit()
// main.js
const canvas = document.querySelector('#bühne');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('render-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
// render-worker.js
self.onmessage = ({ data }) => {
const ctx = data.canvas.getContext('2d');
let x = 0;
const frame = () => {
ctx.clearRect(0, 0, data.canvas.width, data.canvas.height);
ctx.fillStyle = 'crimson';
ctx.fillRect(x, 20, 40, 40);
x = (x + 2) % data.canvas.width;
// Kein commit() nötig – der Browser überträgt das Bild am Ende des Frames
requestAnimationFrame(frame);
};
requestAnimationFrame(frame);
};Ausdrückliche Übergabe per transferToImageBitmap()
const offscreen = new OffscreenCanvas(150, 150);
const ctx = offscreen.getContext('2d');
ctx.fillStyle = 'gold';
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();
// Bitmap entnehmen und an ein sichtbares Canvas übergeben
const bitmap = offscreen.transferToImageBitmap();
const ziel = document.querySelector('#anzeige');
ziel.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
console.log(bitmap.width, bitmap.height);// Wichtig · Fallstricke
- Veraltet und entfernt:
commit()steht nicht mehr im HTML-Standard. Chromium hat die Methode zeitweise angeboten und inzwischen wieder entfernt. Firefox und Safari bieten sie in aktuellen Versionen nicht an. Ein ungeprüfter Aufruf führt zuTypeError: ctx.commit is not a function. - Das Bild wird automatisch übertragen, und zwar nur bei einem
OffscreenCanvas, das pertransferControlToOffscreen()erzeugt wurde. Ein mitnew OffscreenCanvas()erzeugtes Canvas hat keinen Platzhalter. Hier braucht mantransferToImageBitmap()oderconvertToBlob(). - Lange, blockierende Schleifen im Worker verhindern die automatische Übertragung, denn sie findet erst am Ende eines Tasks statt. Deshalb besser
requestAnimationFrame()im Worker verwenden. - Nach
transferToImageBitmap()meldet das übergebeneImageBitmapBreite und Höhe 0, weil sein Inhalt verschoben wurde. Deshalb gibt Beispiel 30 0aus.