unslug fr: move

1 files changed, 161 insertions, 0 deletions

diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
new file mode 100644
index 0000000000..761b5baf3d
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -0,0 +1,161 @@
+---
+title: Dessin de texte avec canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
+
+<p class="summary">Après avoir vu comment <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">appliquer les styles et les couleurs</a> dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.</p>
+
+<h2 id="Dessin_de_texte">Dessin de texte</h2>
+
+<p>  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+</dl>
+
+<h3 id="A_fillText_example" name="A_fillText_example">Un exemple fillText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="A_strokeText_example" name="A_strokeText_example">Un exemple de strokeText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le </span></span> <code>strokeStyle</code><span lang="fr"><span> courant.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Style de texte</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut.</span> <span>Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Le style de texte actuel utilisé lors du dessin du texte.</span> <span>Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}.</span> <span>La police par défaut est 10px sans-serif.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement du texte.</span> <span>Valeurs possibles : </span></span> <code>start</code> <em>(</em><span lang="fr"><span><em>début)</em>, </span></span> <code>end</code> <em>(</em><span lang="fr"><span><em>fin)</em>, </span></span> <code>left</code> <em>(</em><span lang="fr"><span><em>gauche)</em>, </span></span> <code>right</code> <em>(</em><span lang="fr"><span><em>droite)</em> ou </span></span> <code>center</code> <em>(</em><span lang="fr"><span><em>centre)</em>.</span> <span>La valeur par défaut est <code>start</code>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement de base.</span> <span>Valeurs possibles : </span></span> <code>top</code> <em>(</em><span lang="fr"><span><em>haut)</em>, </span></span> <code>hanging</code> <em>(</em><span lang="fr"><span><em>suspendu)</em>, </span></span> <code>middle</code> <em>(</em><span lang="fr"><span><em>moyen)</em>, </span></span> <code>alphabetic</code> <em>(</em><span lang="fr"><span><em>alphabétique)</em>, </span></span> <code>ideographic</code> <em>(</em><span lang="fr"><span><em>idéographique)</em>, </span></span> <code>bottom</code> <em>(</em><span lang="fr"><span><em>en bas)</em>.</span> <span>La valeur par défaut est </span></span><code>alphabetic</code><span lang="fr"><span>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Directionnalité.</span> <span>Valeurs possibles: </span></span> <code>ltr</code> <em>(de gauche à droite)</em><span lang="fr"><span>, </span></span> <code>rtl</code> <em>(de droite à gauche)</em><span lang="fr"><span>, <code>inherit</code> <em>(hérité)</em>.</span> <span>La valeur par défaut est <code>inherit</code>.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Le diagramme suivant du </span></span> <a class="external external-icon" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> <span lang="fr"><span> illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></span></span></p>
+
+<p><img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3>
+
+<p><span id="result_box" lang="fr"><span>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</span></span></p>
+
+<pre class="brush: js;highlight[2] line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>textBaseline <span class="operator token">=</span> <span class="string token">'hanging'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>200<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-canvas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>edit<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Edit<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> edit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'edit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+edit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Mesures_de_texte_avancées"><span class="short_text" id="result_box" lang="fr"><span>Mesures de texte avancées</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne un objet </span></span> {{domxref("TextMetrics")}} <span lang="fr"><span> contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</span></span></p>
+
+<pre class="brush: js;highlight[3] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> text <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">measureText</span><span class="punctuation token">(</span><span class="string token">'foo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// objet TextMetrics</span>
+  text<span class="punctuation token">.</span>width<span class="punctuation token">;</span> <span class="comment token">// 16;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes_spécifiques_à_Gecko"><span class="short_text" id="result_box" lang="fr"><span>Notes spécifiques à Gecko</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas.</span> <span>Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</span></span></p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>