Revision 777067 of <canvas>

<div>{{HTMLRef}}</div>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>

<p>L'<strong>élément HTML <em>Canvas</em></strong> (<code>&lt;canvas&gt;</code>) permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/Web/JavaScript">JavaScript</a>). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code>&lt;canvas&gt;</code>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément <code>&lt;canvas&gt;</code> et ceux pour lesquels JavaScript est désactivé.</p>

<p>Pour plus d'information sur l'élément <code>canvas</code>, voir la page sur <a href="/fr/docs/Web/HTML/Canvas">canvas</a>.</p>

<ul class="htmlelt">
 <li><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a>&nbsp;</dfn><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, contenu palpable</li>
 <li><dfn>Contenu autorisé </dfn> Transparent mais sans descendant étant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> à l'exception des éléments {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</li>
 <li><dfn>Omission de balises </dfn> {{no_tag_omission}}</li>
 <li><dfn>Éléments parents autorisés </dfn> Tout contenu acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</li>
 <li><dfn>Interface DOM </dfn> {{domxref("HTMLCanvasElement")}}</li>
</ul>

<h2 id="Attributs">Attributs</h2>

<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_globaux">attributs globaux</a>.</p>

<dl>
 <dt>{{htmlattrdef("height")}}</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>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
 <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canvas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées.</dd>
 <dt>{{htmlattrdef("width")}}</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="Description">Description</h2>

<h3 id="Balise_&lt;.2Fcanvas&gt;_obligatoire">Balise <code>&lt;/canvas&gt;</code> obligatoire</h3>

<p>À la différence de {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} doit être fermé avec la balise fermante <code>&lt;/canvas&gt;</code>.</p>

<h3 id="Dimensionnement_du_canvas">Dimensionnement du canvas</h3>

<p>La taille affichée du canvas peut être modifiée avec une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Si le rendu de l'image semble distordu, on pourra tenter de définir les attributs <code>width</code> et <code>height</code> explicitement pour l'élément et éviter d'utiliser CSS.</p>

<h2 id="Exemple">Exemple</h2>

<pre class="brush: html">
&lt;canvas id="canvas" width="300" height="300"&gt;
  Désolé, votre navigateur ne supporte pas &amp;lt;canvas&amp;gt;.
&lt;/canvas&gt;
</pre>

<p>Si on utilise un canvas qui n'a pas besoin de gérer la transparence, on pourra utiliser l'attribut moz-opaque dans la balise de l'élément. Cette information sera utilisée par le moteur de rendu pour effectuer des optimisations. Cependant, cet attribut n'a pas été standardisé et ne fonctionne qu'avec les moteurs de rendus Mozilla.</p>

<pre class="brush: html">
&lt;canvas id="moncanvas" moz-opaque&gt;&lt;/canvas&gt;
</pre>

<h2 id="Specifications" name="Specifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilit.C3.A9s_des_navigateurs">Compatibilités des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.8")}} [1][2][3]</td>
   <td>9.0</td>
   <td><a href="https://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
   <td><a href="https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a> [4]</td>
  </tr>
  <tr>
   <td><code>moz-opaque</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>{{CompatGeckoMobile("1.8")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>moz-opaque</code></td>
   <td>{{CompatGeckoMobile("1.9.1")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Notes_sp.C3.A9cifiques_aux_navigateurs">Notes spécifiques aux navigateurs</h3>

<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4>

<ul>
 <li>[1] Avant Gecko 5.0 {{geckoRelease("5.0")}}, la hauteur et la largeur du canvas étaient des entiers signés au lieu d'être des entiers non-signés.</li>
 <li>[2] Avant Gecko 6.0 {{geckoRelease("6.0")}}, un élément {{HTMLElement("canvas")}} avec une largeur ou une hauteur nulle était affiché avec les dimensions par défaut.</li>
 <li>[3] Avant Gecko 12.0 {{geckoRelease("12.0")}}, si JavaScript était désactivé, l'élément <code>&lt;canvas&gt;</code> était affiché au lieu de montrer le contenu alternatif à utiliser (ce qui est voulu dans la <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">spécification</a>). Désormais, quand JavaScript est désactivé, c'est le contenu de recours (<em>fallback</em>) qui est utilisé.</li>
</ul>

<h4 id="Safari">Safari</h4>

<ul>
 <li>[4] Bien que les premières versions de Safari ne rendaient pas la balise fermante obligatoire, la spécification indique que la balise fermante est obligatoire. Aussi, pour une meilleure compatibilité, on préfèrera ajouter la balise fermante.</li>
 <li>Les versions de Safari antérieures à la version 2.0 afficheront le contenu alternatif <em>en plus</em> du contenu de canvas (sauf à utiliser des feuilles de style pour le masquer). Heureusement, la population utilisant ces versions devient de plus en plus rare.</li>
</ul>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/HTML/Canvas">Le portail MDN sur l'élément canvas</a></li>
 <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel Canvas</a></li>
 <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">« <em>cheat sheet</em> » Canvas</a></li>
 <li><a href="/en-US/demos/tag/tech:canvas" title="demos/tag/tech:canvas/">Démos sur l'élément canvas</a></li>
</ul>