1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: OffscreenCanvas
slug: Web/API/OffscreenCanvas
tags:
- API
- Canevas
- Experimental
- Interface
- Reference
browser-compat: api.OffscreenCanvas
translation_of: Web/API/OffscreenCanvas
---
{{APIRef("Canvas API")}} {{SeeCompatTable}}
L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API).
> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers.
## Constructeur
- {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
- : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`.
## Propriétés
- {{domxref("OffscreenCanvas.height")}}
- : La hauteur du canevas hors écran.
- {{domxref("OffscreenCanvas.width")}}
- : La largeur du canevas hors écran.
## Méthodes
- {{domxref("OffscreenCanvas.getContext()")}}
- : Retourne un contexte de rendu pour le canevas hors écran.
<!---->
- {{domxref("OffscreenCanvas.toBlob()")}}
- : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
<!---->
- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
- : Crée un objet {{domxref("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 {{domxref("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 {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("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 {{domxref("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 à {{domxref("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 {{HTMLElement("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 {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "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 {{HTMLElement ("canvas")}} original.
Notez que dans Firefox, cette API n'est actuellement implémentée que pour le [contexte WebGL](/fr-FR/docs/Web/API/WebGL_API) ({{domxref ("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) :
```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
{{Specifications}}
## Compatibilité des navigateurs
{{Compat("api.OffscreenCanvas")}}
## Voir aussi
- [WebGL Off the Main Thread – Mozilla Hacks](https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/)
- {{domxref("CanvasRenderingContext2D")}}
- {{domxref("ImageBitmap")}}
- {{domxref("ImageBitmapRenderingContext")}}
- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}
- {{domxref("WebGLRenderingContext.commit()")}}
|
