aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/html/element/canvas
diff options
context:
space:
mode:
authortristantheb <tristantheb@users.noreply.github.com>2021-06-19 10:25:05 +0200
committerGitHub <noreply@github.com>2021-06-19 10:25:05 +0200
commita47584de1bd47788cb5aa6178fa88b31977b2a8e (patch)
tree1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/canvas
parent1b0940218952a8132ceb9e4b56792ad47e94d552 (diff)
downloadtranslated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz
translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2
translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip
UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)
* UPDATE: Updating pages starting with A * FIX: Update missing KS to html anchor * Review HTML Element a * Review HTML Element abbr * Review HTML Element acronym * Review HTML Element address * Review HTML Element applet * Review HTML Element area * Review HTML Element article * Review HTML Element aside * Review HTML Element audio * UPDATE: Updating pages wtarting with B * Review HTML Element b * Review HTML Element base * Review HTML Element basefont * Review HTML Element bdi * Review HTML Element bdo * Review HTML Element big * Review HTML Element blink * Review HTML Element blockquote * Review HTML Element body * Review HTML Element br * Review HTML Element button * Review HTML Element button - rm HTMLRef * Review HTML Element button - lint link * UPDATE: Updating pages starting with C * UPDATE: Updating pages starting with D * UPDATE: Refresh the reference page * UPDATE: Updating pages starting with E * Review HTML Element canvas * Review HTML Element caption * Review HTML Element center * Review HTML Element cite * UPDATE: Updating pages starting with F * BCD: Update all updated pages with new BCD format * FIX: add missing bracket * Review - HTML element - code * Review - HTML Element - col * Review - HTML Element - colgroup * Review - HTML Element - content * Review - HTML Element - data * Review - HTML Element - datalist * Review - HTML Element - dd * Review - HTML Element - del * Review - HTML Element * Review - HTML Element - dfn * Review - HTML Element - dialog * Review - HTML element - dir * Review - HTML Element div * Review - HTML Element - dl * Review - HTML Element - dt * Review - HTML Element - em * Review - HTML Element - embed * Review - HTML Element - fieldset * Review - HTML Element - figcaption * Review - HTML Element - figure * Review - HTML Element - font * Review - HTML Element - footer * Review - HTML Element - form * Review - HTML Element - frame * Review - HTML Element - frameset * Review updates since PR start - A * Review updates since PR start - B * Review updates since PR start - C * Review updates since PR start - D * Review updates since PR start - F Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/canvas')
-rw-r--r--files/fr/web/html/element/canvas/index.html256
1 files changed, 115 insertions, 141 deletions
diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html
index 94ace3eeae..be7e12369b 100644
--- a/files/fr/web/html/element/canvas/index.html
+++ b/files/fr/web/html/element/canvas/index.html
@@ -5,202 +5,176 @@ tags:
- Canvas
- Element
- HTML
+ - HTML scripting
+ - HTML5
- Reference
- Web
translation_of: Web/HTML/Element/canvas
+browser-compat: html.elements.canvas
---
<div>{{HTMLRef}}</div>
-<p>L'élément <strong><code>&lt;canvas&gt;</code></strong> permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/Web/JavaScript">JavaScript</a> ou grâce à <a href="/fr/docs/Apprendre/WebGL">WebGL</a>). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.</p>
+<p class="summary">On utilise l'élément <strong>HTML <code>&lt;canvas&gt;</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>
-<p>Pour plus d'information sur l'élément <code>&lt;canvas&gt;</code>, voir la page sur <a href="/fr/docs/Web/HTML/Canvas">canvas</a>.</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>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</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="Attributs">Attributs</h2>
+<h2 id="attributes">Attributs</h2>
-<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs globaux</a>.</p>
+<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>{{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 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 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false})")}} à la place.</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>
+ <dt><strong id="attr-height"><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 id="attr-moz-opaque"><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 id="attr-width"><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="Notes_d'utilisation">Notes d'utilisation</h2>
+<h2 id="usage_notes">Notes d'utilisation</h2>
-<h3 id="Contenu_alternatif">Contenu alternatif</h3>
+<h3 id="alternative_content">Contenu alternatif</h3>
-<p>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 qui ne supportent pas l'élément <code>&lt;canvas&gt;</code> et ceux pour lesquels JavaScript est désactivé.</p>
+<p>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 qui ne supportent pas l'élément <code>&lt;canvas&gt;</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="Balise_&lt;canvas>_obligatoire">Balise <code>&lt;/canvas&gt;</code> obligatoire</h3>
+<h3 id="required_canvas_tag">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>
+<p>À la différence de <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> <strong>doit</strong> être fermé avec la balise fermante <code>&lt;/canvas&gt;</code>.</p>
-<h3 id="Dimensionnement_du_canevas_CSS_ou_HTML">Dimensionnement du canevas : CSS ou HTML</h3>
+<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="Taille_maximale_d'un_canevas">Taille maximale d'un canevas</h3>
+<h3 id="maximum_canvas_size">Taille maximale d'un canevas</h3>
<p>La taille maximale d'un élément <code>&lt;canvas&gt;</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>
+ <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="blockIndicator 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 class="notecard note">
+ <p><b>Note :</b></p>
+ <p>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="Exemples">Exemples</h2>
+<h2 id="examples">Exemples</h2>
-<h3 id="HTML">HTML</h3>
+<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">&lt;canvas id="canvas" width="300" height="300"&gt;
+<pre class="brush: html">&lt;canvas width="300" height="100"&gt;
Désolé, votre navigateur ne prend pas en charge &amp;lt;canvas&amp;gt;.
-&lt;/canvas&gt;
-</pre>
+&lt;/canvas&gt;</pre>
-<h3 id="JavaScript">JavaScript</h3>
+<h3 id="javascript">JavaScript</h3>
-<p>On utilise également ce fragment de code JavaScript avec la méthode {{domxref("HTMLCanvasElement.getContext()")}} afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p>
+<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.getElementById('canvas');
+<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="Gérer_l'opacité">Gérer l'opacité</h3>
-
-<p>Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété <code>alpha</code> avec la valeur <code>false</code>.</p>
-
-<pre class="brush: js">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d', {alpha: false});</pre>
+<h3 id="result">RĂ©sultat</h3>
-<p>Avant que cette option soit standard, on pouvait utiliser l'attribut HTML <code>moz-opaque</code> {{non-standard_inline}} {{deprecated_inline}} pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug {{bug(878155)}} pour suivre le retrait de cet attribut.</p>
+<p>{{EmbedLiveSample('examples')}}</p>
-<h3 id="RĂ©sultat">RĂ©sultat</h3>
+<h2 id="accessibility_concerns">Accessibilité</h2>
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+<h3 id="alternative_content_2">Contenu alternatif</h3>
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<h3 id="Contenu_alternatif_2">Contenu alternatif</h3>
-
-<p>Seul, l'élément <code>&lt;canvas&gt;</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>&lt;canvas&gt;</code> pour produire un document accessible.</p>
+<p>Seul, l'élément <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code></a></li>
- <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> interactifs</a></li>
+ <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>&lt;canvas&gt;</code></a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code>&lt;canvas&gt;</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>&lt;canvas&gt;</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>&lt;canvas&gt;</code> interactifs</a></li>
</ul>
-<h2 id="Résumé_technique">Résumé technique</h2>
-
-<table class="properties">
- <tbody>
- <tr>
- <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
- <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
- </tr>
- <tr>
- <th scope="row"><dfn>Contenu autorisé</dfn></th>
- <td>Transparent mais sans aucun 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>.</td>
- </tr>
- <tr>
- <th scope="row"><dfn>Omission de balises</dfn></th>
- <td>{{no_tag_omission}}</td>
- </tr>
- <tr>
- <th scope="row"><dfn>Parents autorisés</dfn></th>
- <td>Tout contenu acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</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"><dfn>Interface DOM</dfn></th>
- <td>{{domxref("HTMLCanvasElement")}}</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
+<h2 id="specifications">Spécifications</h2>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{Specifications}}</p>
-<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-<p>{{Compat("html.elements.canvas")}}</p>
+<p>{{Compat}}</p>
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
<ul>
- <li><a href="/fr/docs/Web/HTML/Canvas">Le portail MDN sur l'élément <code>&lt;canvas&gt;</code></a></li>
- <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel <code>&lt;canvas&gt;</code></a></li>
- <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/API/Canvas_API">Le portail MDN sur l'élément <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Tutoriel <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/Demos_of_open_web_technologies">Démonstrations liées à <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Introduction Ă  <code>&lt;canvas&gt;</code> par Apple</a> (en anglais)</li>
</ul>