OffscreenCanvas

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

L'interfaceOffscreenCanvas fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window etworker.

Note :Cette API n'est actuellement implémentée que pour les contextesWebGL1 etWebGL2. Voirbug Firefox 801176 pour le support de l'API canvas depuis les workers.

Constructeur

OffscreenCanvas(): ConstructeurOffscreenCanvas. Crée un nouvel objetOffscreenCanvas.

Propriétés

OffscreenCanvas.height: La hauteur du canevas hors écran.
OffscreenCanvas.width: La largeur du canevas hors écran.

Méthodes

OffscreenCanvas.getContext(): Retourne un contexte de rendu pour le canevas hors écran.

OffscreenCanvas.toBlob(): Crée un objetBlob représentant l'image contenue dans le canevas.

OffscreenCanvas.transferToImageBitmap(): Crée un objetImageBitmap à partir de l'image la plus récemment générée duOffscreenCanvas.

Une façon d'utiliser l'APIOffscreenCanvas est d'utiliser unRenderingContext obtenu à partir d'un objetOffscreenCanvas pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthodetransferToImageBitmap() peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objetImageBitmap, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.

Pour afficher l'ImageBitmap, vous pouvez utiliser un contexteImageBitmapRenderingContext, qui peut être créé en appelantcanvas.getContext("bitmaprenderer") sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'ImageBitmap donnée. Un appel àImageBitmapRenderingContext.transferImageBitmap() avec l'ImageBitmap précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'ImageBitmap sur le canevas et transférera son appartenance au canevas. Un seulOffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objetsImageBitmapRenderingContext.

Étant donnés ces deux éléments<canvas> :

html

<canvas></canvas> <canvas></canvas>

le code suivant fournira la restitution, en utilisant unOffscreenCanvas comme décrit ci-dessus.

var une = document.getElementById("une").getContext("bitmaprenderer");var deux = document.getElementById("deux").getContext("bitmaprenderer");var horsEcran = new OffscreenCanvas(256, 256);var gl = horsEcran.getContext("webgl");// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...// Exécuter la restitution dans le premier canevasvar bitmapUne = horsEcran.transferToImageBitmap();une.transferImageBitmap(bitmapUne);// ... davantage de dessin pour le second canevas en utilisant le context gl ...// Exécuter la restitution pour le second canevasvar bitmapDeux = horsEcran.transferToImageBitmap();deux.transferImageBitmap(bitmapDeux);

Affichage asynchrone d'images produites par un`OffscreenCanvas`

Une autre façon d'utiliser l'APIOffscreenCanvas est d'appelertransferControlToOffscreen() sur un élément<canvas>, soit sur un worker, soit sur le thread principal, ce qui retournera un objetOffscreenCanvas à partir d'un objetHTMLCanvasElement depuis le thread principal. AppelergetContext() permettra d'obtienir alors unRenderingContext à partir de ceOffscreenCanvas.

Afin de rendre les cadres visibles, vous pouvez appelercommit() sur ceRenderingContext, afin que les cadres soient renvoyés dans l'élément<canvas> original.

Notez que dans Firefox, cette API n'est actuellement implémentée que pour lecontexte WebGL (WebGLRenderingContext.commit()). Pour la prise en charge de l'API Canvas 2D par les employés, voir lebug Firefox 801176.

main.js (code du thread principal) :

var canevasHtml = document.getElementById("canevas");var horsEcran = canevasHtml.transferControlToOffscreen();var worker = new Worker("offscreencanvas.js");worker.postMessage({ canvas: offscreen }, [offscreen]);

offscreencanvas.js (code worker) :

onmessage = function(evt) {  var canevas = evt.data.canvas.  var gl = canevas.getContext("webgl");  // ... un peu de dessin en utilisant le contexte gl ...  // Renvoyer les images dans l'HTMLCanvasElement original  gl.commit();};