Prepare Web API section for Markdown conversion (#2464)

* Remove summary classes and ids

* Remove unecessary hidden

* Remove useless span filled with useless attributes / ids

* Remove useless font

* Remove notranslate

* Remove id in other elements than headings

* Remove name attributes

* Remove <pre><code> for JS w/ language-js class

* Remove <pre><code> for HTML w/ language-html class

* Remove <pre><code> for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI

1 files changed, 50 insertions, 64 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 66e04ba19f..b265fb649a 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -14,17 +14,18 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 ---
 <p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
 
-<p class="summary">Maintenant que nous avons défini notre <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p>
+<p>Maintenant que nous avons défini notre <a href="/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p>
 
 <h2 id="La_grille">La grille</h2>
 
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p>
+<p>Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p>
+
+<img alt="" src="canvas_default_grid.png">
 
 <h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
 
-<p>Au contraire de <a href="/fr/docs/Web/SVG" rel="internal" title="en/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p>
+<p>Au contraire de <a href="/fr/docs/Web/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p>
 
-<div id="section_3">
 <p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p>
 
 <dl>
@@ -42,16 +43,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&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 notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -64,7 +63,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Le résultat de cet exemple est montré ci-dessous.</p>
 
-<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}</p>
 
 <p>La fonction <code>fillRect()</code> dessine un grand carré noir de 100 pixels de côté. La fonction <code>clearRect()</code> efface ensuite un carré de 60x60 pixels, et finalement, la fonction <code>strokeRect()</code> est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.</p>
 
@@ -78,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <ol>
  <li>Tout d'abord, vous devez créer le trajet.</li>
- <li>Ensuite vous devez utiliser des <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li>
+ <li>Ensuite vous devez utiliser des <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li>
  <li>Finalement, vous devez fermer le trajet.</li>
  <li>Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.</li>
 </ol>
@@ -88,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 <dl>
  <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
  <dd>Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.</dd>
- <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt>
+ <dt><a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt>
  <dd>Méthodes pour définir différents trajets pour les objets.</dd>
  <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
  <dd>Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.</dd>
@@ -100,28 +99,30 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>La première étape pour créer un trajet est d'appeler <code>beginPath()</code>. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.</p>
 
-<div class="note"><strong>Note :</strong> lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</div>
+<div class="note">
+  <p><strong>Note :</strong> Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</p>
+</div>
 
 <p>La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.</p>
 
 <p>La troisième méthode, optionnelle, est l'appel à <code>closePath()</code>. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.</p>
 
-<div class="note"><strong>Note :</strong> quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</div>
+<div class="note">
+  <p><strong>Note :</strong> Quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</p>
+</div>
 
 <h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3>
 
 <p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -137,7 +138,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Le résultat ressemble à :</p>
 
-<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}</p>
 
 <h3 id="Déplacement_du_stylo">Déplacement du stylo</h3>
 
@@ -152,16 +153,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction <code>draw()</code> que nous avons vue plus tôt.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&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 notranslate">function draw() {
+<pre class="brush: js">function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -181,12 +180,12 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Le résultat ressemble à ce qui suit :</p>
 
-<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}</p>
 
 <p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p>
 
 <div class="note">
-<p><strong>Note :</strong> pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p>
+<p><strong>Note :</strong> Pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p>
 </div>
 
 <h3 id="Les_lignes">Les lignes</h3>
@@ -202,16 +201,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -236,7 +233,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Il commence par appeler <code>beginPath()</code> pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode <code>moveTo()</code> pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.</p>
 
-<p>{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+<p>{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}</p>
 
 <p>Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le <code>closePath()</code> pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.</p>
 
@@ -254,31 +251,29 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 <p>Regardons plus en détail la méthode <code>arc</code>, qui prend six paramètres : <code>x</code> et <code>y</code> sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. <code>rayon</code> se passe d'explication. Les paramètres <code>angleInitial et</code> <code>angleFinal</code> définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre <code>antihoraire</code> est une valeur booléenne qui, lorsque <code>true</code>, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.</p>
 
 <div class="note">
-<p><strong>Note </strong>: les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p>
+<p><strong>Note :</strong> Les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p>
 </div>
 
 <p>L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.</p>
 
-<p>Les deux <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p>
+<p>Les deux <a href="/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p>
 
 <p>Les coordonnées <code>x</code> et <code>y</code> devraient être claires. <code>rayon</code> et <code>angleInitial</code> sont fixés. L'<code>angleFinal</code> commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.</p>
 
 <p>L'instruction pour le paramètre <code>antihoraire</code> a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction <code>if</code> fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.</p>
 
 <div class="note">
-<p><strong>Note :</strong> cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p>
+<p><strong>Note :</strong> Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p>
 </div>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="200"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -306,7 +301,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 </pre>
 
-<p>{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+<p>{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}</p>
 
 <h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3>
 
@@ -319,7 +314,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
  <dd>Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par <code>x</code> et <code>y</code>, en utilisant les points de contrôle (<code>cp1x</code>, <code>cp1y</code>) et (<code>cp2x</code>, <code>cp2y</code>).</dd>
 </dl>
 
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p>
+<p>La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p>
+
+<p><img alt="" src="canvas_curves.png"></p>
 
 <p>Les paramètres <code>x</code> et <code>y</code> de ces deux méthodes sont les coordonnées du point d'arrivée. <code>cp1x</code> et <code>cp1y</code> sont les coordonnées du premier point de contrôle, et  <code>cp2x</code> et <code>cp2y</code> sont les coordonnées du second point de contrôle.</p>
 
@@ -331,16 +328,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -359,22 +354,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 </pre>
 
-<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}</p>
 
 <h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4>
 
 <p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -393,7 +386,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 </pre>
 
-<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}</p>
 
 <h3 id="Rectangles">Rectangles</h3>
 
@@ -410,16 +403,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 <p>Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -507,14 +498,11 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
 
 <p>L'image résultante ressemble à ce qui suit :</p>
 
-<div id="section_18">
 <p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p>
 
 <p>Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété <code>fillStyle</code> sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi<code>())</code>. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.</p>
 
 <p>Nous reviendrons sur <code>fillStyle</code> plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.</p>
-</div>
-</div>
 
 <h2 id="Objets_Path2D">Objets Path2D</h2>
 
@@ -523,14 +511,14 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
 
 <dl>
  <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
- <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd>
+ <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd>
 </dl>
 
 <pre class="notranslate"><code>new Path2D();     // objet trajet vide
 new Path2D(trajet); // copie depuis un autre objet Path2D
 new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
 
-<p>Toutes les <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p>
+<p>Toutes les <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p>
 
 <p>L'API <code>Path2D</code> ajoute aussi une manière de combiner des trajets en utilisant la méthode <code>addPath</code>. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.</p>
 
@@ -543,16 +531,14 @@ new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
 
 <p>Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets <code>Path2D</code>, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API <code>Path2D</code>, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet <code>Path2D</code> à utiliser au lieu du trajet en cours. Ici, <code>stroke</code> et <code>fill</code> sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.</p>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html hidden">&lt;html&gt;
  &lt;body onload="dessiner();"&gt;
    &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-</div>
 
-<pre class="brush: js;highlight[6,9] notranslate">function dessiner() {
+<pre class="brush: js">function dessiner() {
   var canevas = document.getElementById('canvas');
   if (canevas.getContext){
     var ctx = canevas.getContext('2d');
@@ -569,13 +555,13 @@ new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
   }
 }</pre>
 
-<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}</p>
 
 <h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3>
 
-<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p>
+<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p>
 
-<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p>
+<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p>
 
 <pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre>