convert content to md

1 files changed, 131 insertions, 114 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
index eec783769b..eb0ae18226 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
@@ -10,36 +10,33 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Transformations
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}
 
-<p>Précédemment dans ce tutoriel, nous avons étudié la <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</p>
+Précédemment dans ce tutoriel, nous avons étudié la [grille du canevas](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques) et le **système de coordonnées**. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
 
-<h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2>
+## Sauvegarde et restauration d'état
 
-<p>Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.</p>
+Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
- <dd>Sauvegarde l'état du canevas dans sa globalité.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
- <dd>Restore le plus récent état sauvegardé du canevas.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.save", "save()")}}
+  - : Sauvegarde l'état du canevas dans sa globalité.
+- {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+  - : Restore le plus récent état sauvegardé du canevas.
 
-<p>Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode <code>save() </code>ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :</p>
+Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode `save() `ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :
 
-<ul>
- <li>les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).</li>
- <li>Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
- <li>Le chemin de découpe (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>) actuel, qu'on abordera plus loin.</li>
-</ul>
+- les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).
+- Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
+- Le chemin de découpe ([clipping path](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths)) actuel, qu'on abordera plus loin.
 
-<p>La méthode <code>save()</code> peut être invoquée autant de fois que nécessaire. Chaque appel de <code>restore()</code> enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.</p>
+La méthode `save()` peut être invoquée autant de fois que nécessaire. Chaque appel de `restore()` enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.
 
-<h3 id="Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas">Un exemple de sauvegarde et de restauration de l état du canevas</h3>
+### Un exemple de sauvegarde et de restauration de l état du canevas
 
-<p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p>
+Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
@@ -58,43 +55,47 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
   ctx.restore();               // Restaure l'état d'origine
   ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p>
+La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.
 
-<p>Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction <code>restore()</code>, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant <code>save ()</code>, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.</p>
+Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction `restore()`, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant `save ()`, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.
 
-<p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p>
+Lorsque la deuxième instruction `restore()` est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.
 
-<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}</p>
+{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}
 
-<h2 id="Déplacement">Déplacement</h2>
+## Déplacement
 
-<p>La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
+La première des méthodes de transformation que nous examinerons est `translate ()`. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
- <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+  - : Déplace la toile et son origine sur la grille. `x` indique la distance horizontale du déplacement, et `y` indique à quelle distance déplacer la grille verticalement.
 
-<img alt="" src="canvas_grid_translate.png"> 
+![](canvas_grid_translate.png)
 
-<p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p>
+C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode `restore` que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.
 
-<h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3>
+### Un exemple `translate`
 
-<p>Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode<code> translate ()</code>, tous les rectangles seraient dessinés à la même position (0,0). La méthode <code>translate ()</code> nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction <code>fillRect ()</code>. Cela le rend un peu plus facile à comprendre et à utiliser.</p>
+Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode` translate ()`, tous les rectangles seraient dessinés à la même position (0,0). La méthode `translate ()` nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction `fillRect ()`. Cela le rend un peu plus facile à comprendre et à utiliser.
 
-<p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p>
+Dans la fonction `draw ()`, nous appelons la fonction `fillRect ()` neuf fois en utilisant deux boucles `for` . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à `fillRect ()` utilise les mêmes coordonnées à chaque fois, en s'appuyant sur `translate ()` pour ajuster la position du dessin.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 3; i++) {
-    for (var j = 0; j &lt; 3; j++) {
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
       ctx.save();
       ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
       ctx.translate(10 + j * 50, 10 + i * 50);
@@ -102,37 +103,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       ctx.restore();
     }
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
+{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}
 
-<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}</p>
+## Rotation
 
-<h2 id="Rotation">Rotation</h2>
+La seconde méthode de transformation est `rotate()`. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.
 
-<p>La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
+- {{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+  - : Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
- <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd>
-</dl>
+![](canvas_grid_rotate.png)
 
-<img alt="" src="canvas_grid_rotate.png">
+Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode `translate ()`.
 
-<p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p>
+### Un exemple `rotate`
 
-<h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3>
+Dans cet exemple, nous utiliserons la méthode `rotate ()` pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de `translate ()`.
 
-<p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p>
+> **Note :** Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : `radians = (Math.PI/180)*degrees`.
 
-<div class="note">
-<p><strong>Note :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
-</div>
-
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // rectangles de gauche, rotation depuis l'origine du canevas
@@ -160,34 +162,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   // dessine le rectangle gris
   ctx.fillStyle = '#4D4E53';
   ctx.fillRect(150, 30, 100, 100);
-}</pre>
+}
+```
 
-<p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p>
+Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="300" height="200"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}</p>
+{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}
 
-<h2 id="Mise_à_léchelle">Mise à l'échelle</h2>
+## Mise à l'échelle
 
-<p>La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.</p>
+La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
- <dd>Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+  - : Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.
 
-<p>En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant <code>translate (0, canvas.height), scale (1, -1)</code>, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).</p>
+En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant `translate (0, canvas.height), scale (1, -1)`, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).
 
-<p>Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.</p>
+Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.
 
-<h3 id="Un_exemple_scale">Un exemple <code>scale</code></h3>
+### Un exemple `scale`
 
-<p>Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.</p>
+Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // dessine un rectangle simple, mais le met à l'échelle.
@@ -200,55 +206,61 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.scale(-1, 1);
   ctx.font = '48px serif';
   ctx.fillText('MDN', -135, 120);
-}</pre>
+}
+```
+
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
+
+```js hidden
+draw();
+```
+
+{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+## Transformation
 
-<pre class="brush: js hidden">draw();</pre>
+Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.
 
-<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}</p>
+- {{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
 
-<h2 id="Transformation">Transformation</h2>
+  - : Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par :
 
-<p>Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.</p>
+    <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
- <dd><p>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : </p><math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math>
- <p>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</p></dd>
-</dl>
+    Si l'un des arguments est `infini`, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
 
-<p>Les paramètres de cette fonction sont :</p>
+Les paramètres de cette fonction sont :
 
-<dl>
- <dt><code>a (m11)</code></dt>
- <dd>Mise à l'échelle horizontale.</dd>
- <dt><em><code>b (m12)</code></em></dt>
- <dd>Inclinaison horizontale.</dd>
- <dt><code>c (m21)</code></dt>
- <dd>Inclinaison verticale.</dd>
- <dt><code>d (m22)</code></dt>
- <dd>Mise à l'échelle verticale.</dd>
- <dt><code>e (dx)</code></dt>
- <dd>Déplacement horizontal.</dd>
- <dt><code>f (dy)</code></dt>
- <dd>Déplacement vertical.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
- <dd>Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode <code>transform ()</code> avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
- <dd>Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : <code>ctx.setTransform (1, 0, 0, 1, 0, 0)</code>;</dd>
-</dl>
+- `a (m11)`
+  - : Mise à l'échelle horizontale.
+- _`b (m12)`_
+  - : Inclinaison horizontale.
+- `c (m21)`
+  - : Inclinaison verticale.
+- `d (m22)`
+  - : Mise à l'échelle verticale.
+- `e (dx)`
+  - : Déplacement horizontal.
+- `f (dy)`
+  - : Déplacement vertical.
+- {{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+  - : Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode `transform ()` avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.
+- {{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+  - : Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : `ctx.setTransform (1, 0, 0, 1, 0, 0)`;
 
-<h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3>
+### Exemple pour `transform` et `setTransform`
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
   var cos = Math.cos(Math.PI / 6);
   ctx.translate(100, 100);
   var c = 0;
-  for (var i = 0; i &lt;= 12; i++) {
+  for (var i = 0; i <= 12; i++) {
     c = Math.floor(255 / 12 * i);
     ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
     ctx.fillRect(0, 0, 100, 10);
@@ -258,12 +270,17 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.setTransform(-1, 0, 0, 1, 100, 100);
   ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
   ctx.fillRect(0, 50, 100, 100);
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="200" height="250"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}</p>
+{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}
 
-<p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p>
+{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}