OffscreenCanvas
===============

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**Expérimental:** **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 Firefox 801176 pour le support de l'API canvas depuis les workers.

Constructeur
------------

`OffscreenCanvas()` (en-US)

Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`.

Propriétés
----------

`OffscreenCanvas.height` (en-US)

La hauteur du canevas hors écran.

`OffscreenCanvas.width` (en-US)

La largeur du canevas hors écran.

Méthodes
--------

`OffscreenCanvas.getContext()` (en-US)

Retourne un contexte de rendu pour le canevas hors écran.


`OffscreenCanvas.toBlob()` (en-US)

Crée un objet `Blob` représentant l'image contenue dans le canevas.


`OffscreenCanvas.transferToImageBitmap()` (en-US)

Crée un objet `ImageBitmap` (en-US) à 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()` (en-US) peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet `ImageBitmap` (en-US), 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` (en-US), 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()` (en-US) 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>` :


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


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


```js
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()` (en-US) 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()` (en-US) 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 le bug Firefox 801176.

main.js (code du thread principal) :


```js
var canevasHtml = document.getElementById("canevas");
var horsEcran = canevasHtml.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
```


offscreencanvas.js (code worker) :


```js
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
--------------

| Specification |
| --- |
| HTML Standard # the-offscreencanvas-interface |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* WebGL Off the Main Thread – Mozilla Hacks
* `CanvasRenderingContext2D`
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `HTMLCanvasElement.transferControlToOffscreen()` (en-US)
* `WebGLRenderingContext.commit()`