Fix broken live samples (#1917)

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fixes sample and updates vs en-US

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

1 files changed, 66 insertions, 88 deletions

diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
index 392c7360e1..1bea09a84e 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
+++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -1,147 +1,125 @@
 ---
 title: CanvasRenderingContext2D.bezierCurveTo()
 slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
-tags:
-  - 2D
-  - API
-  - Bézier
-  - Canevas
-  - Canvas
-  - CanvasRenderingContext2D
-  - Courbe
-  - Courbe cubique
-  - Courbe cubique de Bézier
-  - Courbe de Bézier
-  - Méthode
-  - contexte
 translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+browser-compat: api.CanvasRenderingContext2D.bezierCurveTo
 ---
 <div>{{APIRef}}</div>
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p>
+<p>La méthode <code><strong>CanvasRenderingContext2D.bezierCurveTo()</strong></code> de l'API Canvas 2D ajoute une <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/moveTo"><code>moveTo()</code></a> avant de créer une courbe de Bézier.</p>
 
 <h2 id="Syntaxe">Syntaxe</h2>
 
-<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+<pre class="brush: js">void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 </pre>
 
 <h3 id="Paramètres">Paramètres</h3>
 
 <dl>
- <dt><code>pointContrôle1X</code></dt>
- <dd>La coordonnée en x du premier point de contrôle.</dd>
- <dt><code>pointContrôle1Y</code></dt>
- <dd>La coordonnée en y du premier point de contrôle.</dd>
- <dt><code>pointContrôle2X</code></dt>
- <dd>La coordonnée en x du second point de contrôle.</dd>
- <dt><code>pointContrôle2Y</code></dt>
- <dd>La coordonnée en y du second point de contrôle.</dd>
- <dt><code>pointArrivéeX</code></dt>
- <dd>La coordonnée en x du point d'arrivée.</dd>
- <dt><code>pointArrivéeY</code></dt>
- <dd>La coordonnée en y du point d'arrivée.</dd>
+ <dt><code>cp1x</code></dt>
+ <dd>L'abscisse du premier point de contrôle.</dd>
+ <dt><code>cp1y</code></dt>
+ <dd>L'ordonnée du premier point de contrôle.</dd>
+ <dt><code>cp2x</code></dt>
+ <dd>L'abscisse du second point de contrôle.</dd>
+ <dt><code>cp2y</code></dt>
+ <dd>L'ordonnée du second point de contrôle.</dd>
+ <dt><code>x</code></dt>
+ <dd>L'abscisse du point d'arrivée.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée du point d'arrivée.</dd>
 </dl>
 
 <h2 id="Exemples">Exemples</h2>
 
-<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3>
+<h3 id="how_beziercurveto_works">Fonctionnement de bezierCurveTo()</h3>
 
 <p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+<pre class="brush: html">
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
 </pre>
 
 <h4 id="JavaScript">JavaScript</h4>
 
-<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D
-const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
+<pre class="brush: js;">
+// Define canvas and context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 // Define the points as {x, y}
-let pDépart    = { x: 50,  y: 20  };
-let pContrôle1 = { x: 230, y: 30  };
-let pContrôle2 = { x: 150, y: 80  };
-let pArrivée   = { x: 250, y: 100 };
-
-// Courbe cubique de Bézier
-contexte2D.beginPath();
-contexte2D.moveTo(start.x, start.y);
-contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
-contexte2D.stroke();
-
-// Points de départ et d'arrivée
-contexte2D.fillStyle = 'blue';
-contexte2D.beginPath();
-contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
-contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
-contexte2D.fill();
-
-// Points de contrôle
-contexte2D.fillStyle = 'red';
-contexte2D.beginPath();
-contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
-contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
-contexte2D.fill();</pre>
+let debut = { x: 50,    y: 20  };
+let cp1 =   { x: 230,   y: 30  };
+let cp2 =   { x: 150,   y: 80  };
+let fin =   { x: 250,   y: 100 };
+
+// Courbe de Bézier cubique
+ctx.beginPath();
+ctx.moveTo(debut.x, debut.y);
+ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
+ctx.stroke();
+
+// Points de début et d'arrivée
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
+ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
+ctx.fill();
+
+// Points de contrôles
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
+ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
+ctx.fill();
+</pre>
 
 <h4 id="Résultat">Résultat</h4>
 
-<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p>
+<p>Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.</p>
 
-<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p>
+<p>{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}</p>
 
-<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3>
+<h3 id="a_simple_bezier_curve">Une courbe cubique de Bézier simple</h3>
 
-<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p>
+<p>Cet exemple dessine une courbe cubique de Bézier simple en utilisant <code>bezierCurveTo()</code>.</p>
 
 <h4 id="HTML_2">HTML</h4>
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+<pre class="brush: html">
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
 </pre>
 
 <h4 id="JavaScript_2">JavaScript</h4>
 
-<p>La courbe débute au point spécifiée par <code>moveTo()</code>: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
+<p>La courbe débute au point spécifié par <code>moveTo()</code>&nbsp;: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
 
-<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
+<pre class="brush: js; highlight:[6]">
+const canvas = document.getElementById("canvas");
+const contexte2D = canvas.getContext("2d");
 
 contexte2D.beginPath();
 contexte2D.moveTo(30, 30);
 contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
 contexte2D.stroke();</pre>
 
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+<h4 id="result_2">Résultat</h4>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+<p>{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}</p>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<h2 id="specifications">Spécifications</h2>
 
+<p>{{Specifications}}</p>
 
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
- <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li>
+ <li>L'interface définissant cette méthode : <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></li>
+ <li><a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">L'article Wikipédia sur les courbes de Bézier</a></li>
 </ul>