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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: '<canvas> : l''élément de canevas graphique'
slug: Web/HTML/Element/canvas
tags:
- Canvas
- Element
- HTML
- HTML scripting
- HTML5
- Reference
- Web
translation_of: Web/HTML/Element/canvas
browser-compat: html.elements.canvas
---
<div>{{HTMLRef}}</div>
<p>On utilise l'élément <strong>HTML <code><canvas></code></strong> avec l'API <a href="/fr/docs/Web/API/Canvas_API">canvas</a>, ou l'API <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour dessiner des graphiques et des animations.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
<td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> à l'exception des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Tout contenu acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
</tr>
<tr>
<th scope="row">Rôle ARIA implicite</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></td>
</tr>
</tbody>
</table>
<h2 id="attributes">Attributs</h2>
<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
<dt><strong><code>height</code></strong></dt>
<dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd>
<dt><strong><code>moz-opaque</code></strong> {{non-standard_inline}}{{deprecated_inline}}</dt>
<dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard <a href="fr/docs/Web/API/HTMLCanvasElement/getContext"><code>canvas.getContext('2d', { alpha: false})</code></a> à la place.</dd>
<dt><strong><code>width</code></strong></dt>
<dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd>
</dl>
<h2 id="usage_notes">Notes d'utilisation</h2>
<h3 id="alternative_content">Contenu alternatif</h3>
<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code><canvas></code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code><canvas></code> et ceux pour lesquels JavaScript est désactivé. Fournir un texte de repli ou un sous-DOM utile aide à <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">rendre le canevas plus accessible</a>.</p>
<h3 id="required_canvas_tag">Balise <code></canvas></code> obligatoire</h3>
<p>À la différence de <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> <strong>doit</strong> être fermé avec la balise fermante <code></canvas></code>.</p>
<h3 id="sizing_the_canvas_using_css_versus_html">Dimensionnement du canevas : CSS ou HTML</h3>
<p>On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.</p>
<p>Mieux vaut utiliser les attributs explicites <code>width</code> et <code>height</code> de l'élément en HTML (ou via du code JavaScript).</p>
<h3 id="maximum_canvas_size">Taille maximale d'un canevas</h3>
<p>La taille maximale d'un élément <code><canvas></code> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Navigateur</th>
<th scope="col">Hauteur maximale</th>
<th scope="col">Largeur maximale</th>
<th scope="col">Aire maximale</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>32 767 pixels</td>
<td>32 767 pixels</td>
<td>268 435 456 pixels (soit 16 384 x 16 384)</td>
</tr>
<tr>
<td>Firefox</td>
<td>32 767 pixels</td>
<td>32 767 pixels</td>
<td>472 907 776 pixels (soit 22 528 x 20 992)</td>
</tr>
<tr>
<td>Safari</td>
<td>32 767 pixels</td>
<td>32 767 pixels</td>
<td>268 435 456 pixels (soit 16 384 x 16 384)</td>
</tr>
<tr>
<td>IE</td>
<td>8 192 pixels</td>
<td>8 192 pixels</td>
<td>?</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Note :</strong>Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p>
</div>
<h2 id="examples">Exemples</h2>
<h3 id="html">HTML</h3>
<p>Le fragment de code suivant ajoute un élément <code>canvas</code> au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.</p>
<pre class="brush: html"><canvas width="300" height="100">
Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;.
</canvas></pre>
<h3 id="javascript">JavaScript</h3>
<p>On utilise également ce fragment de code JavaScript avec la méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p>
<pre class="brush: js">var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</pre>
<h3 id="result">Résultat</h3>
<p>{{EmbedLiveSample('examples')}}</p>
<h2 id="accessibility_concerns">Accessibilité</h2>
<h3 id="alternative_content_2">Contenu alternatif</h3>
<p>Seul, l'élément <code><canvas></code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code><canvas></code> pour produire un document accessible. Voici quelques pages et articles pour aider à l'accessibilité avec les canevas :</p>
<ul>
<li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li>
<li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code><canvas></code></a></li>
<li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code><canvas></code></a></li>
<li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code><canvas></code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code><canvas></code> interactifs</a></li>
</ul>
<h2 id="specifications">Spécifications</h2>
<p>{{Specifications}}</p>
<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat}}</p>
<h2 id="see_also">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/API/Canvas_API">Le portail MDN sur l'élément <code><canvas></code></a></li>
<li><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Tutoriel <code><canvas></code></a></li>
<li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code><canvas></code></a></li>
<li><a href="/fr/docs/Web/Demos_of_open_web_technologies">Démonstrations liées à <code><canvas></code></a></li>
<li><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Introduction à <code><canvas></code> par Apple</a> (en anglais)</li>
</ul>
|
