We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

Note : Cette API n'est actuellement implémentée que pour les contextes WebGL1 etWebGL2. Voir bug 801176 pour le support de l'API canvas depuis les workers.

Constructeur

OffscreenCanvas()
Constructeur OffscreenCanvas. Crée un nouvel objet OffscreenCanvas.

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 objet Blob représentant l'image contenue dans le canevas.
OffscreenCanvas.transferToImageBitmap()
Crée un objet ImageBitmap à partir de l'image la plus récemment générée du OffscreenCanvas.

Exemples

Affichage synchrone d'images produites par un OffscreenCanvas

Une façon d'utiliser l'API OffscreenCanvas est d'utiliser un RenderingContext obtenu à partir d'un objet OffscreenCanvas 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éthode transferToImageBitmap() peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet ImageBitmap, 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 contexte ImageBitmapRenderingContext, qui peut être créé en appelant canvas.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 seul OffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objets ImageBitmapRenderingContext.

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

<canvas id="une"></canvas>
<canvas id="deux"></canvas>

le code suivant fournira la restitution, en utilisant un OffscreenCanvas 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 canevas
var 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 canevas 
var bitmapDeux = horsEcran.transferToImageBitmap();
deux.transferImageBitmap(bitmapDeux);

Affichage asynchrone d'images produites par un OffscreenCanvas

Une autre façon d'utiliser l'API OffscreenCanvas est d'appeler transferControlToOffscreen() sur un élément <canvas>, soit sur un worker, soit sur le thread principal, ce qui retournera un objet OffscreenCanvas à partir d'un objet HTMLCanvasElement depuis le thread principal. Appeler getContext() permettra d'obtienir alors un RenderingContext à partir de ce OffscreenCanvas.

Afin de rendre les cadres visibles, vous pouvez appeler commit() sur ce RenderingContext, 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 le contexte WebGL (WebGLRenderingContext.commit()). Pour la prise en charge de l'API Canvas 2D par les employés, voir bug 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();
};

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'OffscreenCanvas' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 60 [2] 44 (44) [1] Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base Pas de support 44.0 (44) [1] Pas de support Pas de support Pas de support

[1] Cette fonctionnalité se trouve derrière un paramètre de préférence de fonctionnalité. Dans about:config, mettre gfx.offscreencanvas.enabled à true.
[2] Cette fonctionnalité se trouve derrière un indicateur. Dans chrome://flags, cliquer sur Activer pour Experimental canvas features

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : NemoNobobyPersonne
Dernière mise à jour par : NemoNobobyPersonne,