From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001
From: julieng <julien.gattelier@gmail.com>
Date: Sat, 2 Oct 2021 17:20:24 +0200
Subject: convert content to md

---
 .../api/canvas_api/tutorial/basic_usage/index.md   | 150 +++++++++++----------
 1 file changed, 78 insertions(+), 72 deletions(-)

(limited to 'files/fr/web/api/canvas_api/tutorial/basic_usage')

diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
index 0faa7a82ec..ca47946655 100644
--- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -10,117 +10,122 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 ---
-<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
 
-<h2 id="Lélément_&lt;canvas>">L'élément <code>&lt;canvas&gt;</code></h2>
+## L'élément `<canvas>`
 
-<p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p>
+Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.
 
-<pre class="brush: html">&lt;canvas id="tutoriel" width="150" height="150"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="tutoriel" width="150" height="150"></canvas>
+```
 
-<p>Ceci ressemble beaucoup à l'élément &lt;img&gt;. La seule différence est qu'il n'y a pas les attributs <code>src</code> et <code>alt</code>. L'élément <code>&lt;canvas&gt;</code> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le <a href="/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a>. Quand les attributs <strong>width</strong> et <strong>height</strong> ne sont pas spécifiés, le canvas sera initialement large de <strong>300 pixels</strong> et haut de <strong>150 pixels</strong>. Les dimensions du canvas peuvent être modifiés par du <a href="/fr/docs/Web/CSS">CSS</a>, mais l'image sera dessinée selon les valeurs <strong>width</strong> et <strong>height</strong> du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.</p>
+Ceci ressemble beaucoup à l'élément \<img>. La seule différence est qu'il n'y a pas les attributs `src` et `alt`. L'élément `<canvas>` a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le [DOM](/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko). Quand les attributs **width** et **height** ne sont pas spécifiés, le canvas sera initialement large de **300 pixels** et haut de **150 pixels**. Les dimensions du canvas peuvent être modifiés par du [CSS](/fr/docs/Web/CSS), mais l'image sera dessinée selon les valeurs **width** et **height** du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.
 
-<div class="note">
-<p><strong>Note :</strong> Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs <code>width</code> et <code>height</code> dans l'élément <code>&lt;canvas&gt;</code>, et de ne pas utiliser de CSS.</p>
-</div>
+> **Note :** Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs `width` et `height` dans l'élément `<canvas>`, et de ne pas utiliser de CSS.
 
-<p>L'attribut <code>id</code> n'est pas spécifique à l'élément <code>&lt;canvas&gt;</code>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une <code>id</code> car ça facilite beaucoup l'identification du <code>canvas</code> dans le code <code>javascript</code>.</p>
+L'attribut `id` n'est pas spécifique à l'élément `<canvas>`. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une `id` car ça facilite beaucoup l'identification du `canvas` dans le code `javascript`.
 
-<p>L'élément <code>&lt;canvas&gt;</code> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.</p>
+L'élément `<canvas>` peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.
 
-<h3 id="Contenu_de_repli">Contenu de repli</h3>
+### Contenu de repli
 
-<p>Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.</p>
+Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.
 
-<p>Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <code>&lt;canvas&gt;</code> lui-même. Les navigateurs qui ne supportent pas <code>&lt;canvas&gt;</code> vont afficher ce contenu de repli, et ceux qui supportent <code>&lt;canvas&gt;</code> vont l'ignorer et dessiner le canvas.</p>
+Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément `<canvas>` lui-même. Les navigateurs qui ne supportent pas `<canvas>` vont afficher ce contenu de repli, et ceux qui supportent `<canvas>` vont l'ignorer et dessiner le canvas.
 
-<p>Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.</p>
+Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.
 
-<pre class="brush: html ">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+```html
+<canvas id="stockGraph" width="150" height="150">
   current stock price: $3.15 + 0.15
-&lt;/canvas&gt;
+</canvas>
 
-&lt;canvas id="clock" width="150" height="150"&gt;
-  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
-&lt;/canvas&gt;</pre>
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+```
 
-<h2 id="La_nécessité_de_la_balise_&lt;canvas>">La nécessité de la balise <code>&lt;/canvas&gt;</code></h2>
+## La nécessité de la balise `</canvas>`
 
-<p>Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} <strong>requiert</strong> la balise fermante (<code>&lt;/canvas&gt;</code>).</p>
+Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} **requiert** la balise fermante (`</canvas>`).
 
-<div class="note">
-<p><strong>Note :</strong> Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.</p>
-</div>
+> **Note :** Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.
 
-<p>Si vous n'avez pas besoin de contenu de repli, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.</p>
+Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...></canvas>` est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.
 
-<h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2>
+## Le contexte de rendu
 
-<p>L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs <strong>contextes de rendu</strong>, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte <a href="/fr/docs/Web/WebGL">WebGL</a>, qui utilise un contexte 3D ("experimental-webgl") inspiré de <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p>
+L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/).
 
-<p>Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une <a href="/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes">méthode</a> nommée <code>getContext()</code>, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. <code>getContext()</code> a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".</p>
+Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".
 
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');</pre>
+```js
+var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+```
 
-<p>La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode <code>getContext()</code>.</p>
+La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode `getContext()`.
 
-<h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2>
+## Vérification de la prise en charge
 
-<p>Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode <code>getContext()</code>. Notre extrait de code ci-dessus se transforme donc en ceci :</p>
+Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci :
 
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
+```js
+var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
   // code de dessin dans le canvas
 } else {
   // code pour le cas où canvas ne serait pas supporté
-}</pre>
+}
+```
 
+## Un modèle basique
 
-<h2 id="Un_modèle_basique">Un modèle basique</h2>
+Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.
 
-<p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</p>
-
-<pre class="brush: html ">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"/&gt;
-    &lt;title&gt;Canvas tutorial&lt;/title&gt;
-    &lt;script type="text/javascript"&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
       function draw() {
         var canvas = document.getElementById('tutorial');
         if (canvas.getContext) {
           var ctx = canvas.getContext('2d');
         }
       }
-    &lt;/script&gt;
-    &lt;style type="text/css"&gt;
+    </script>
+    <style type="text/css">
       canvas { border: 1px solid black; }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+```
 
-<p>Ce script contient une fonction <code>draw()</code>, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.</p>
+Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.
 
-<p>Voici à quoi le modèle ressemble :</p>
+Voici à quoi le modèle ressemble :
 
-<p>{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}</p>
+{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.</p>
+Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.
 
-<pre class="brush: html ">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
-  &lt;meta charset="utf-8"/&gt;
-  &lt;script type="application/javascript"&gt;
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
     function draw() {
       var canvas = document.getElementById("canvas");
       if (canvas.getContext) {
@@ -133,15 +138,16 @@ if (canvas.getContext) {
         ctx.fillRect(30, 30, 50, 50);
       }
     }
-  &lt;/script&gt;
- &lt;/head&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>
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<p>Cet exemple ressemble a ceci :</p>
+Cet exemple ressemble a ceci :
 
-<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}</p>
+{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}
 
-<p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
-- 
cgit v1.2.3-54-g00ecf