fix some fixable flaws in Canvas API (fr) (#1436)

* fix some fixable flaws in Canvas API (fr)

* Remove unnecessary asset

* Review fr

Co-authored-by: julieng <julien.gattelier@gmail.com>

17 files changed, 211 insertions, 173 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png
new file mode 100644
index 0000000000..01d35419b2
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png b/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png
new file mode 100644
index 0000000000..cd936a30a1
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png
new file mode 100644
index 0000000000..091505b1b9
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg
new file mode 100644
index 0000000000..5790de338d
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg
new file mode 100644
index 0000000000..0267621028
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_picture_frame.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_picture_frame.png
new file mode 100644
index 0000000000..e68f9e1647
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_picture_frame.png
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png
new file mode 100644
index 0000000000..3258cf3684
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg
new file mode 100644
index 0000000000..55f1cee446
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg
new file mode 100644
index 0000000000..711911f12c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg
new file mode 100644
index 0000000000..5b4bb37ac1
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg
new file mode 100644
index 0000000000..86db3eb243
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg
new file mode 100644
index 0000000000..01f9e44f3d
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg
new file mode 100644
index 0000000000..fbec8abd8c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg
new file mode 100644
index 0000000000..719a55117f
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg
new file mode 100644
index 0000000000..46d1afa954
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
index 3f492a6141..a90c9ff8b3 100644
--- a/files/fr/web/api/canvas_api/tutorial/using_images/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
@@ -2,266 +2,300 @@
 title: Utilisation d'images
 slug: Web/API/Canvas_API/Tutorial/Using_images
 tags:
+  - Advanced
   - Canvas
-  - Graphismes
+  - Graphics
   - HTML
-  - Tutoriels
+  - Tutorial
 translation_of: Web/API/Canvas_API/Tutorial/Using_images
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images
 ---
-<p>{{CanvasSidebar}} {{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
+<p>{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
 
-<p class="summary">Jusqu'à présent, nous avons créé nos propres <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">formes</a> et <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de {{HTMLElement ("canvas")}} est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des "sprites" dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p>
+<p class="summary">Jusqu'à présent, nous avons créé nos propres <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formes</a> et <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des <i>sprites</i> dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p>
 
-<p>L'importation d'images est un processus en deux étapes :</p>
+<p>L'importation d'images dans un canevas se déroule en deux étapes :</p>
 
 <ol>
- <li><span id="result_box" lang="fr"><span>obtenez une référence à un objet {{domxref ("HTMLImageElement")}} ou à un autre élément canvas en tant que source.</span> <span>Il est également possible d'utiliser des images en fournissant une URL.</span></span></li>
- <li>l'image est dessinée sur le canevas à l'aide de la fonction <code>drawImage()</code> .</li>
+ <li>L'obtention d'une référence à un objet <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.</li>
+ <li>Le dessin de l'image à l'aide de la fonction <code>drawImage()</code> .</li>
 </ol>
 
-<p><span class="short_text" id="result_box" lang="fr"><span>Jetons un oeil à la façon de le faire.</span></span></p>
+<p>Voyons comment faire.</p>
 
-<h2 id="Obtenir_des_images_à_dessiner"><span class="short_text" id="result_box" lang="fr"><span>Obtenir des images à dessiner</span></span></h2>
+<h2 id="getting_images_to_draw">Obtenir des images à dessiner</h2>
 
-<p><span id="result_box" lang="fr"><span>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</span></span></p>
+<p>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</p>
 
 <dl>
- <dt>{{domxref("HTMLImageElement")}}</dt>
- <dd><span id="result_box" lang="fr"><span>Il s'agit d'images créées à l'aide du constructeur </span></span> <code>Image()</code> <span lang="fr"><span>, ainsi que de tout élément {{HTMLElement ("img")}}.</span></span></dd>
- <dt>{{domxref("SVGImageElement")}}</dt>
- <dd><span id="result_box" lang="fr"><span>Ce sont des images incorporées en utilisant l'élément {{SVGElement ("image")}}.</span></span></dd>
- <dt>{{domxref("HTMLVideoElement")}}</dt>
- <dd><span id="result_box" lang="fr"><span>L'utilisation d'un élément HTML </span></span> {{HTMLElement("video")}} <span lang="fr"><span> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</span></span></dd>
- <dt>{{domxref("HTMLCanvasElement")}}</dt>
- <dd><span id="result_box" lang="fr"><span>Vous pouvez utiliser un autre élément </span></span> {{HTMLElement("canvas")}} <span lang="fr"><span> comme source d'image.</span></span></dd>
+ <dt><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></dt>
+ <dd>Il s'agit d'images créées à l'aide du constructeur  <code>Image()</code>, ainsi que de tout élément HTML <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>.</dd>
+ <dt><a href="/fr/docs/Web/API/SVGImageElement"><code>SVGImageElement</code></a></dt>
+ <dd>Ce sont des images incorporées en utilisant l'élément SVG <a href="/fr/docs/Web/SVG/Element/image"><code>&lt;image&gt;</code></a>.</dd>
+ <dt><a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></dt>
+ <dd>L'utilisation d'un élément HTML  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</dd>
+ <dt><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></dt>
+ <dd>Vous pouvez utiliser un autre élément  <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>  comme source d'image.</dd>
 </dl>
 
-<p><span id="result_box" lang="fr"><span>Ces sources sont collectivement référencées par le type {{domxref ("CanvasImageSource")}}.</span></span></p>
+<p>Ces sources sont collectivement référencées par le type <a href="/fr/docs/Web/API/CanvasImageSource"><code>CanvasImageSource</code></a>.</p>
 
-<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'obtenir des images pour une utilisation sur une toile.</span></span></p>
+<p>Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.</p>
 
-<h3 id="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page" name="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page">Utilisation d'images présentes sur la même page</h3>
+<h3 id="using_images_from_the_same_page">Utilisation d'images présentes sur la même page</h3>
 
-<p><span id="result_box" lang="fr"><span>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</span></span></p>
+<p>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</p>
 
 <ul>
- <li>la collection {{domxref("document.images")}} ;</li>
- <li>la méthode {{domxref("document.getElementsByTagName()")}} ;</li>
- <li>si vous connaissez l'ID de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  {{domxref("document.getElementById()")}} pour retrouver cette image.</li>
+ <li>La collection <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> ;</li>
+ <li>La méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ;</li>
+ <li>Si vous connaissez l'identifiant de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a> pour retrouver cette image.</li>
 </ul>
 
-<h3 id="Utilisation_dimages_dun_autre_domaine"><span lang="fr"><span>Utilisation d'images d'un autre domaine</span></span></h3>
+<h3 id="using_images_from_other_domains">Utilisation d'images d'un autre domaine</h3>
 
-<p><span id="result_box" lang="fr"><span>En utilisant l'attribut {{htmlattrxref ("crossorigin", "img")}} d'un élément {{HTMLElement ("img")}} (reflété par la propriété </span></span> {{domxref("HTMLImageElement.crossOrigin")}}), vous <span lang="fr"> <span>pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage ()</code>.</span> <span>Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer;</span> <span>sinon utiliser l'image va <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP#What_is_a_.22tainted.22_canvas.3F">souiller le canevas</a>.</span></span></p>
+<p>En utilisant l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> (reflété par la propriété  <a href="/fr/docs/Web/API/HTMLImageElement/crossOrigin"><code>HTMLImageElement.crossOrigin</code></a>), vous  pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage()</code>. Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_.22tainted.22_canvas.3f">corrompre le canevas</a>.</p>
 
-<h3 id="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas" name="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas">Utilisation d'autres éléments canvas</h3>
+<h3 id="using_other_canvas_elements">Utilisation d'autres éléments canvas</h3>
 
-<p><span id="result_box" lang="fr"><span>Comme pour les images normales, nous accédons aux autres éléments Canvas en utilisant la méthode {{domxref ("document.getElementsByTagName ()")}} ou {{domxref ("document.getElementById ()")}}.</span> <span>Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</span></span></p>
+<p>Comme pour les images normales, nous accédons aux autres éléments <code>&lt;canvas&gt;</code> en utilisant la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ou <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</p>
 
 <p>Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.</p>
 
-<h3 id="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien" name="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien">Création d'une image à partir de rien</h3>
+<h3 id="creating_an_image_from_scratch">Création d'une image à partir de rien</h3>
 
-<p>Une autre option est de créer de nouveaux objets {{domxref("HTMLImageElement")}} dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image().</code></p>
+<p>Une autre option est de créer de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image()</code>.</p>
 
-<pre class="eval notranslate">var img = new Image();   // Crée un nouvel élément Image
+<pre class="brush: js">
+let img = new Image();   // Crée un nouvel élément Image
 img.src = 'myImage.png'; // Définit le chemin vers sa source
 </pre>
 
 <p>Lorsque ce script est exécuté, l'image commence à être chargée.</p>
 
-<p><span id="result_box" lang="fr"><span>Si vous essayez d'appeler <code>drawImage ()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela peut même déclencher une exception).</span> <span>Vous devez donc être sûr d'utiliser l'événement <code>load</code> pour ne pas essayer avant que l'image ne soit chargée :</span></span></p>
+<p>Si vous essayez d'appeler <code>drawImage()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela pourra même déclencher une exception). Utilisez donc l'événement <code>load</code> pour ne pas dessiner avant que l'image ne soit chargée :</p>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
-img<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="comment token">// </span></code> <span class="short_text" id="result_box" lang="fr"><span>exécute les instructions drawImage ici</span></span> <code class="language-js">
-<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'myImage.png'</span><span class="punctuation token">;</span> <span class="comment token">// définit le chemin de la source</span></code></pre>
+<pre class="brush: js">
+let img = new Image();   // Crée un nouvel élément img
+img.addEventListener('load', function() {
+  //  exécute les instructions drawImage ici
+}, false);
+img.src = 'myImage.png'; // définit le chemin de la source
+</pre>
 
-<p><span id="result_box" lang="fr"><span>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de suivre plus d'une image, vous devez recourir à quelque chose de plus intelligent.</span> <span>Il est hors de portée de ce tutoriel de regarder les tactiques de préchargement d'images, mais vous devriez garder cela à l'esprit.</span></span></p>
+<p>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.</p>
 
-<h4 id="Int.C3.A9gration_d.27une_image_via_une_URL_data" name="Int.C3.A9gration_d.27une_image_via_une_URL_data:">Intégration d'une image via une data: URL</h4>
+<h3 id="embedding_an_image_via_data_url">Intégration d'une image via une URL de données</h3>
 
-<p><span id="result_box" lang="fr"><span>Un autre moyen possible d'inclure des images est via les </span></span> <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url.</a><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">.</a> <span lang="fr"><span>.</span> <span>Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</span></span></p>
+<p>Un autre moyen possible d'inclure des images consiste à utiliser les <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URL de données (<code>data: url</code>)</a>. Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</p>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
-img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">
+let img = new Image();   // Crée un nouvel élément img
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
 
-<p><span id="result_box" lang="fr"><span>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur.</span> <span>Un autre avantage potentiel,'il est également possible d'encapsuler dans un fichier tous vos </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> <span lang="fr"><span> et images, ce qui les rend plus portable vers d'autres endroits.</span></span></p>
+<p>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Cela permet également d'encapsuler dans un fichier tous vos  <a href="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/Web/JavaScript">JavaScript</a>, <a href="/fr/docs/Web/HTML">HTML</a>  et images, ce qui les rend plus portables vers d'autres endroits.</p>
 
-<p><span id="result_box" lang="fr"><span>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et pour les grandes images, l'URL encodée peut devenir assez longue.</span></span></p>
+<p>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, pour les grandes images, l'URL encodée peut devenir assez longue.</p>
 
-<h3 id="drawImage" name="drawImage"><span class="short_text" id="result_box" lang="fr"><span>Utilisation des images d'une vidéo</span></span></h3>
+<h3 id="using_frames_from_a_video">Utilisation des images d'une vidéo</h3>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez également utiliser les images d'une vidéo présentée par un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> (même si la vidéo n'est pas visible).</span> <span>Par exemple, si vous avez un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> avec l'ID "myvideo", vous pouvez faire :</span></span></p>
+<p>Vous pouvez également utiliser les images d'une vidéo présentée par un élément  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  avec l'identifiant <code>myvideo</code>, vous pouvez faire :</p>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getMyVideo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">if</span> <span class="punctuation token">(</span>canvas<span class="punctuation token">.</span>getContext<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<pre class="brush: js">
+function getMyVideo() {
+  let canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    let ctx = canvas.getContext('2d');
 
-    <span class="keyword token">return</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myvideo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span></code></pre>
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
 
-<p><span id="result_box" lang="fr"><span>Cela renvoie l'objet {{domxref ("HTMLVideoElement")}} pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</span></span></p>
+<p>Cela renvoie l'objet <a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a> pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</p>
 
-<h2 id="drawImage" name="drawImage">Dessin d'images</h2>
+<h2 id="drawImage">Dessin d'images</h2>
 
-<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p>
+<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p>
 
 <dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
- <dd><span id="result_box" lang="fr"><span>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</span></span></dd>
+ <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y)</code></a></dt>
+ <dd>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</dd>
 </dl>
 
 <div class="note">
-<p><span id="result_box" lang="fr"><span>Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine &lt;svg&gt;.</span></span></p>
+<p>Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <code>&lt;svg&gt;</code>.</p>
 </div>
 
-<h4 id="Example_A_simple_line_graph" name="Example_A_simple_line_graph">Exemple: un graphique linéaire simple</h4>
+<h3 id="example_a_simple_line_graph">Exemple : un graphique linéaire simple</h3>
 
 <p>Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement <code>load</code> de l'objet image pour lancer les instructions de dessin. La méthode <code>drawImage()</code> place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>180<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<pre class="brush: js;highlight[5] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">96</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">70</span><span class="punctuation token">,</span> <span class="number token">66</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">103</span><span class="punctuation token">,</span> <span class="number token">76</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">170</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">;</span>
-  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5395/backdrop.png'</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<p><span class="short_text" id="result_box" lang="fr"><span>Le graphique résultant ressemble à ceci :</span></span></p>
-
-<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
-
-<h2 id="Mise_.C3.A0_l.27.C3.A9chelle" name="Mise_.C3.A0_l.27.C3.A9chelle">Mise à l'échelle</h2>
+<div class="hidden">
+  <pre class="brush: html">
+&lt;html&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+  </pre>
+</div>
+
+<pre class="brush: js">
+function draw() {
+  console.log("tt");
+  let ctx = document.getElementById('canvas').getContext('2d');
+  let img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'backdrop.png';
+}
+</pre>
+
+<p>Le graphique résultant ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}}</p>
+
+<h2 id="scaling">Mise à l'échelle</h2>
 
 <p>La seconde variante de la méthode <code>drawImage()</code> ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.</p>
 
-<h4 id="Example_Tiling_an_image" name="Example_Tiling_an_image">Exemple: Tapissage d'une image</h4>
+<dl>
+  <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y, width, height)</code></a></dt>
+  <dd>Cette variante ajoute les paramètres <code>width</code> et <code>height</code> qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.</dd>
+</dl>
 
-<p>Dans cet exemple, nous utiliserons une image comme papier-peint en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle plaçant plusieurs fois l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p>
+<h3 id="example_tiling_an_image">Exemple : mosaïque à partir d'une image</h3>
+
+<p>Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p>
 
 <div class="note">
-<p><strong>Note</strong> : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p>
+<p><strong>Note</strong> : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p>
 </div>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+<div class="hidden">
+<pre class="brush: html">
+&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">4</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-      <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">3</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> j <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> i <span class="operator token">*</span> <span class="number token">38</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">38</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="punctuation token">}</span>
-    <span class="punctuation token">}</span>
-  <span class="punctuation token">}</span><span class="punctuation token">;</span>
-  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5397/rhino.jpg'</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">
+function draw() {
+  let ctx = document.getElementById('canvas').getContext('2d');
+  let img = new Image();
+  img.onload = function() {
+    for (let i = 0; i &lt; 4; i++) {
+      for (let j = 0; j &lt; 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'rhino.jpg';
+}
+</pre>
 
-<p><span class="short_text" id="result_box" lang="fr"><span>Le canevas résultant ressemble à ceci :</span></span></p>
+<p>Le canevas résultant ressemble à ceci :</p>
 
-<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+<p>{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}}</p>
 
-<h2 id="D.C3.A9coupage" name="D.C3.A9coupage">Découpage</h2>
+<h2 id="slicing">Découpage</h2>
 
 <p>La troisième et dernière variante de la méthode <code>drawImage()</code> possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.</p>
 
 <dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
- <dd><span id="result_box" lang="fr"><span>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> et le dessine dans le canevas en le plaçant sur le canevas</span> <span>(<code>dx</code>, <code>dy</code>) et le redimensionner à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</span></span><img alt="" class="internal" src="/@api/deki/files/1203/=Canvas_drawimage.jpg" style="float: right;"></dd>
+ <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)</code></a></dt>
+ <dd>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées <code>dx</code>, <code>dy</code>) et le redimensionne à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</dd>
 </dl>
 
-<p><span id="result_box" lang="fr"><span>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image à droite.</span> <span>Les quatre</span></span><span lang="fr"><span> premiers paramètres définissent l'emplacement et la taille du morceau de l'image source.</span> <span>Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</span></span></p>
+<p>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</p>
+
+<img alt="Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres." src="canvas_drawimage.jpg">
 
 <p>Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.</p>
 
-<h4 id="Example_Framing_an_image" name="Example_Framing_an_image">Exemple : encadrer une image</h4>
+<h3 id="example_framing_an_image">Exemple : encadrer une image</h3>
 
 <p>Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.</p>
 
-<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
-   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">display</span><span class="punctuation token">:</span>none<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>source<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/5397/rhino.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>227<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>frame<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>132<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">
+&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<pre class="brush: js">
+function draw() {
+  let canvas = document.getElementById('canvas');
+  let ctx = canvas.getContext('2d');
 
-  <span class="comment token">// Draw slice</span>
-  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
-                <span class="number token">33</span><span class="punctuation token">,</span> <span class="number token">71</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">,</span> <span class="number token">124</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">87</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  // On dessine la portion d'image
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
 
-  <span class="comment token">// Draw frame</span>
-  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'frame'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+  // On dessine le cadre
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+</pre>
 
-<p><span id="result_box" lang="fr"><span>Nous avons pris une approche différente pour charger les images cette fois.</span> <span>Au lieu de les charger en créant de nouveaux objets {{domxref ("HTMLImageElement")}}, nous les avons incluses comme balises </span></span> {{HTMLElement("img")}} <span lang="fr"><span>directement dans notre source HTML et avons récupéré les images depuis ceux-ci.</span> <span>Les images sont masquées à partir de la sortie, en définissant la propriété CSS {{cssxref ("display")}} à aucune.</span></span></p>
+<p>Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a>, nous les avons incluses comme balises  <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>none</code>.</p>
 
-<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+<p>{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}</p>
 
-<p><span id="result_box" lang="fr"><span>Le script lui-même est très simple.</span> <span>Chaque {{HTMLElement ("img")}} se voit attribuer un attribut ID, ce qui facilite leur sélection en utilisant {{domxref ("document.getElementById ()")}}.</span> <span>Nous utilisons simplement <code>drawImage ()</code> pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par le haut en utilisant un deuxième appel <code>drawImage ()</code>.</span></span></p>
+<p>Chaque <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> se voit attribuer un attribut <code>id</code>, ce qui facilite leur sélection en utilisant <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Nous utilisons <code>drawImage()</code> pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel <code>drawImage()</code>.</p>
 
-<h2 id="Art_gallery_example" name="Art_gallery_example">Exemple d'une galerie d'art</h2>
+<h2 id="art_gallery_example">Exemple d'une galerie d'art</h2>
 
-<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément {{HTMLElement("canvas")}} est inséré pour chaque image et un cadre est dessiné autour.</p>
+<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> est inséré pour chaque image et un cadre est dessiné autour.</p>
 
 <p>Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.</p>
 
-<p>Le code ci-dessous devrait s'expliquer de lui-même. <span id="result_box" lang="fr"><span>Nous parcourons le conteneur {{domxref ("document.images")}}</span></span> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement, pour ceux qui ne sont pas familiers avec le DOM, l'utilisation de la méthode {{domxref("Node.insertBefore")}} . <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément canvas).</p>
-
-<pre class="brush: html notranslate">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-     &lt;table&gt;
-      &lt;tr&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
-      &lt;/tr&gt;
-     &lt;/table&gt;
-     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
- &lt;/body&gt;
+<p>Dans le code qui suit, nous parcourons le conteneur <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode <a href="/fr/docs/Web/API/Node/insertBefore"><code>Node.insertBefore</code></a>. <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément <code>canvas</code>).</p>
+
+<pre class="brush: html">
+&lt;html&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;table&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img src="gallery_1.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_2.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_3.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_4.jpg"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img src="gallery_5.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_6.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_7.jpg"&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img src="gallery_8.jpg"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;/table&gt;
+    &lt;img id="frame" src="canvas_picture_frame.png" width="132" height="150"&gt;
+  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
-<p><span id="result_box" lang="fr"><span>Et voici quelques CSS pour rendre les choses agréables :</span></span></p>
+<p>Voici la feuille de style CSS pour mettre en forme :</p>
 
-<pre class="brush: css notranslate">body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+<pre class="brush: css">
+body {
+  background: 0 -100px repeat-x url(bg_gallery.png) #4F191A;
   margin: 10px;
 }
 
@@ -278,12 +312,13 @@ td {
 }
 </pre>
 
-<p><span id="result_box" lang="fr"><span>Le lien pour tout cela, c'est le JavaScript pour dessiner les images encadrées :</span></span></p>
+<p>Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :</p>
 
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">
+function draw() {
 
   // Boucle à travers toutes les images
-  for (var i = 0; i &lt; document.images.length; i++) {
+  for (let i = 0; i &lt; document.images.length; i++) {
 
     // N'ajoute pas de canevas pour l'image du cadre
     if (document.images[i].getAttribute('id') != 'frame') {
@@ -298,24 +333,27 @@ td {
 
       ctx = canvas.getContext('2d');
 
-      // Dessine l'image sur canvas
+      // Dessine l'image sur le canevas
       ctx.drawImage(document.images[i], 15, 20);
 
       // Ajoute un cadre
       ctx.drawImage(document.getElementById('frame'), 0, 0);
     }
   }
-}</pre>
+}
+</pre>
 
-<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+<p>{{EmbedLiveSample("art_gallery_example", 725, 400)}}</p>
 
-<h2 id="Contrôle_du_comportement_de_la_mise_à_léchelle_de_limage"><span id="result_box" lang="fr"><span>Contrôle du comportement de la mise à l'échelle de l'image</span></span></h2>
+<h2 id="controlling_image_scaling_behavior">Contrôler la mise à l'échelle de l'image</h2>
 
-<p><span id="result_box" lang="fr"><span>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de mise à l'échelle.</span> <span>Vous pouvez utiliser la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} <span lang="fr"><span> du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors de la mise à l'échelle des images dans votre contexte.</span> <span>Par défaut, cela est vrai, ce qui signifie que les images seront lissées lors de la mise à l'échelle.</span> <span>Vous pouvez désactiver cette fonctionnalité comme ceci :</span></span></p>
+<p>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de redimensionnement. Vous pouvez utiliser la propriété  <a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled"><code>imageSmoothingEnabled</code></a>  du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut <code>true</code>, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :</p>
 
-<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>mozImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-ctx<span class="punctuation token">.</span>webkitImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-ctx<span class="punctuation token">.</span>msImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-ctx<span class="punctuation token">.</span>imageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span></code></pre>
+<pre class="brush: js">
+ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
 
-<p>{{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg
new file mode 100644
index 0000000000..0b4b45c4fa
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg