Revision 627529 of <canvas>

<p>{{ HTMLVersionHeader(5) }}</p>
<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>)&nbsp; permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/JavaScript" rel="internal" title="/fr/docs/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 dont JavaScript est désactivé.</p>
<p>Pour plus d'information sur l'élément <code>canvas</code>, voir le <a href="/fr/docs/Tutoriel_canvas" title="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
<ul class="htmlelt">
 <li><dfn><a href="/fr/docs/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu&nbsp;</a></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/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, contenu palpable</li>
 <li><dfn>Contenu autorisé</dfn> Transparent mais sans descendants étant du <a href="/fr/docs/HTML/Catégorie_de_contenu#Contenu_interactif" title="/fr/docs/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/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" title="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</li>
 <li><dfn>Interface DOM </dfn> {{domxref("HTMLCanvasElement")}}<span id="cke_bm_259C" style="display: none;">&nbsp;</span></li>
</ul>
<h2 id="Attributs">Attributs</h2>
<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/HTML/Global_attributes" title="/fr/docs/HTML/Global_attributes">attributs globaux</a>.</p>
<dl>
 <dt>
  {{ htmlattrdef("width") }}</dt>
 <dd>
  &nbsp;La largeur en pixels CSS. 300 par défaut.</dd>
 <dt>
  {{ htmlattrdef("height") }}</dt>
 <dd>
  La hauteur en pixels CSS. 150 par défaut.</dd>
</dl>
<p>{{ Note("Les dimensions peuvent être modifiées via la feuille de style CSS. L'image est mise à l'échelle en cas de redimensionnement.") }}</p>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: html">
&lt;<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>&gt;
&nbsp; Désolé, votre navigateur ne supporte pas &lt;canvas&gt;.
&lt;/<span class="end-tag">canvas</span>&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">Commentaire</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")}}</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></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>
  </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>Avant Gecko 5.0 {{geckoRelease("5.0")}}, la largeur et la hauteur de l'élément canvas étaient des entiers signés et non pas des entiers non-signés.</li>
 <li>Avant Gecko 6.0 {{geckoRelease("6.0")}}, un élément&nbsp; {{HTMLElement("canvas")}} ayant une largeur et une hauteur à zéro aurait été traité comme si ses dimensions étaient celles par défaut.</li>
 <li>Avant Gecko 12.0 {{geckoRelease("12.0")}}, si JavaScript était désactivé, l'élément <code>&lt;canvas&gt;</code> était affiché plutôt que de montrer le contenu alternatif comme cela est demandé par la <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">spécification</a>. À présent, le contenu alternatif est bien renvoyé</li>
</ul>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
 <li><code>{{domxref("HTMLCanvasElement")}}</code></li>
 <li><a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">Le portail MDN sur l'élément canvas</a></li>
 <li><a href="/fr/docs/Tutoriel_canvas" title="/fr/docs/Tutoriel_canvas">Tutoriel Canvas</a></li>
 <li><a href="https://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">« Cheat sheet » Canvas</a></li>
 <li><a href="https://developer.mozilla.org/en-US/demos/tag/tech:canvas" title="demos/tag/tech:canvas/">Démos sur l'élément canvas</a></li>
</ul>
<p>{{HTMLRef}}</p>
<p>&nbsp;</p>