convert content to md

1 files changed, 55 insertions, 53 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 700966e07c..7b3b723efb 100644
--- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -4,52 +4,55 @@ slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
 translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
 
-<p>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p>
+L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.
 
-<h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2>
+## Conseils sur les performances
 
-<p>Ceci est une liste de conseils pour améliorer les performances</p>
+Ceci est une liste de conseils pour améliorer les performances
 
-<h3 id="Pré-rendre_les_primitifs_similaires_ou_répéter_les_objects_dans_un_canvas_hors-champ">Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ</h3>
+### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ
 
-<p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p>
+Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.
 
-<pre class="brush: js">myEntity.offscreenCanvas = document.createElement("canvas");
+```js
+myEntity.offscreenCanvas = document.createElement("canvas");
 myEntity.offscreenCanvas.width = myEntity.width;
 myEntity.offscreenCanvas.height = myEntity.height;
 myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
 
 myEntity.render(myEntity.offscreenContext);
-</pre>
+```
 
-<h3 id="Abandonnez_les_coordonnées_décimales_et_utilisez_des_entiers_à_la_place">Abandonnez les coordonnées décimales et utilisez des entiers à la place</h3>
+### Abandonnez les coordonnées décimales et utilisez des entiers à la place
 
-<p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p>
+Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.
 
-<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
-</pre>
+```js
+ctx.drawImage(myImage, 0.3, 0.5);
+```
 
-<p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.
 
-<h3 id="Ne_pas_redimensionner_dimages_avec_drawImage">Ne pas redimensionner d'images avec <code>drawImage</code></h3>
+### Ne pas redimensionner d'images avec `drawImage`
 
-<p>Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.
 
-<h3 id="Utiliser_des_canvas_empilés_pour_les_scènes_complexes">Utiliser des canvas empilés pour les scènes complexes</h3>
+### Utiliser des canvas empilés pour les scènes complexes
 
-<p>Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.</p>
+Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.
 
-<p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p>
+Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque _jeu_ où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.
 
-<pre class="brush: html">&lt;div id="stage"&gt;
-  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-&lt;/div&gt;
+```html
+<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
 
-&lt;style&gt;
+<style>
   #stage {
     width: 480px;
     height: 320px;
@@ -60,18 +63,19 @@ myEntity.render(myEntity.offscreenContext);
   #ui-layer { z-index: 3 }
   #game-layer { z-index: 2 }
   #background-layer { z-index: 1 }
-&lt;/style&gt;
-</pre>
+</style>
+```
 
-<h3 id="Du_CSS_pour_les_grandes_images_de_fond">Du CSS pour les grandes images de fond</h3>
+### Du CSS pour les grandes images de fond
 
-<p>Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.</p>
+Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.
 
-<h3 id="Redimensionner_les_canvas_avec_CSS_transform">Redimensionner les canvas avec CSS transform</h3>
+### Redimensionner les canvas avec CSS transform
 
-<p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p>
+[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.
 
-<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+```js
+var scaleX = window.innerWidth / canvas.width;
 var scaleY = window.innerHeight / canvas.height;
 
 var scaleToFit = Math.min(scaleX, scaleY);
@@ -79,33 +83,31 @@ var scaleToCover = Math.max(scaleX, scaleY);
 
 stage.style.transformOrigin = "0 0"; //scale from top left
 stage.style.transform = "scale(" + scaleToFit + ")";
-</pre>
+```
 
-<h3 id="Utiliser_lattribut_moz-opaque_Gecko_only">Utiliser l'attribut <code>moz-opaque</code> (Gecko only)</h3>
+### Utiliser l'attribut `moz-opaque` (Gecko only)
 
-<p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p>
+Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.
 
-<pre class="brush: html">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+```html
+<canvas id="mycanvas" moz-opaque></canvas>
+```
 
-<h3 id="Dautres_conseils">D'autres conseils</h3>
+### D'autres conseils
 
-<ul>
- <li>Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).</li>
- <li>Éviter de refaire un rendu si ce n'est pas nécessaire.</li>
- <li>Rendre uniquement les différences, pas tout le canvas.</li>
- <li>Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.</li>
- <li>Empêcher <a href="/fr/docs/Dessin_de_texte_avec_canvas">le rendu de texte</a> quand c'est possible.</li>
- <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li>
- <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li>
- <li>Faire attention aux bibliothèques physiques lourdes.</li>
- <li>Tester les performances avec <a href="http://jsperf.com">JSPerf</a>.</li>
-</ul>
+- Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).
+- Éviter de refaire un rendu si ce n'est pas nécessaire.
+- Rendre uniquement les différences, pas tout le canvas.
+- Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.
+- Empêcher [le rendu de texte](/fr/docs/Dessin_de_texte_avec_canvas) quand c'est possible.
+- Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
+- Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
+- Faire attention aux bibliothèques physiques lourdes.
+- Tester les performances avec [JSPerf](http://jsperf.com).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
- <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
-</ul>
+- [Improving HTML5 Canvas Performance – HTML5 Rocks](http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref)
+- [Optimizing your JavaScript game for Firefox OS – Mozilla Hacks](https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/)
 
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
+{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}