From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 .../api/canvas_api/a_basic_ray-caster/index.html   |  24 +-
 files/fr/web/api/canvas_api/index.html             |  28 +-
 .../manipulating_video_using_canvas/index.html     | 186 ++---
 .../tutorial/advanced_animations/index.html        |  54 +-
 .../tutorial/applying_styles_and_colors/index.html | 809 ++++++++++-----------
 .../tutorial/basic_animations/index.html           |  44 +-
 .../api/canvas_api/tutorial/basic_usage/index.html |  21 +-
 .../tutorial/compositing/example/index.html        |  12 +-
 .../api/canvas_api/tutorial/compositing/index.html |  26 +-
 .../canvas_api/tutorial/drawing_shapes/index.html  | 114 ++-
 .../canvas_api/tutorial/drawing_text/index.html    | 144 ++--
 .../hit_regions_and_accessibility/index.html       |  10 +-
 files/fr/web/api/canvas_api/tutorial/index.html    |  48 +-
 .../tutorial/optimizing_canvas/index.html          |  14 +-
 .../pixel_manipulation_with_canvas/index.html      |  70 +-
 .../canvas_api/tutorial/transformations/index.html |  70 +-
 .../canvas_api/tutorial/using_images/index.html    |  16 +-
 17 files changed, 797 insertions(+), 893 deletions(-)

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

diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
index fc87a5c200..b3520fecbd 100644
--- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
+++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -12,42 +12,42 @@ original_slug: Un_raycaster_basique_avec_canvas
 ---
 
{{CanvasSidebar}}

 
-
Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.

+
Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.

 
 
{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

 
 
Ouvrir une nouvelle fenêtre

 
-
Pourquoi ?

+
Pourquoi ?

 
-
Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais était déjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.

+
Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais était déjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.

 
-
La présentation et le tutoriel  canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.

+
La présentation et le tutoriel  canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.

 
-
Comment ?

+
Comment ?

 
-
L'idée de base est d'employer  {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.

+
L'idée de base est d'employer  {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.

 
 
Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.

 
-
Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.

+
Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.

 
-
Résultats

+
Résultats

 
 
Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.

 
 
De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)

 
-
Le projeteur de rayons (ray-caster)

+
Le projeteur de rayons (ray-caster)

 
-
De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).

+
De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).

 
 
Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <canvas> et amusez-vous!

  

  input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js 

 
-
Voir aussi

+
Voir aussi

 
 
diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html
index a697d99b2a..9c3ea0f0ef 100644
--- a/files/fr/web/api/canvas_api/index.html
+++ b/files/fr/web/api/canvas_api/index.html
@@ -9,11 +9,11 @@ translation_of: Web/API/Canvas_API
 ---
 
{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}

 
-
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

+
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

 
-
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas  de Google.

+
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas  de Google.

 
-
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

+
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

 
 
Exemple

 
@@ -21,12 +21,12 @@ translation_of: Web/API/Canvas_API
 
 
HTML

 
-
<canvas id="canvas"></canvas>
+
<canvas id="canvas"></canvas>
 

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
@@ -35,10 +35,9 @@ ctx.fillRect(10, 10, 100, 100);
 
 
Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

 
-
 
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+
{{ EmbedLiveSample('code_jouable', 700, 360) }}

 
 
Références

 
-

 
    
  
  • {{domxref("HTMLCanvasElement")}}
    • 
  
  • {{domxref("CanvasRenderingContext2D")}}
    • 
@@ -92,9 +89,8 @@ window.addEventListener('load', drawCanvas);
  
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • 
  
  • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • 
 

-

 
-
Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

+
Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

 
 
{{domxref("CanvasCaptureMediaStream")}} est lié.

 
@@ -103,7 +99,7 @@ window.addEventListener('load', drawCanvas);
 

  
Tutoriel canvas

  
Un tutoriel complet qui couvre à la fois l'usage élémentaire de <canvas> mais aussi ses fonctionnalités avancées.

- 
Extraits de code : Canvas

+ 
Extraits de code : Canvas

  
Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <canvas>.

  
Demo: Un raycaster basique avec canvas

  
Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.

@@ -134,7 +130,7 @@ window.addEventListener('load', drawCanvas);
  
  • PlayCanvas est un moteur de jeu open-source.
    • 
  
  • Pixi.js est un moteur de jeu open-source.
    • 
  
  • PlotKit est une bibliothèque permettant de réaliser des diagrammes et des graphiques.
    • 
- 
  • Rekapi est une API d'animation par key-framing pour Canvas.
    • 
+ 
  • Rekapi est une API d'animation par key-framing pour Canvas.
    • 
  
  • PhiloGL est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.
    • 
  
  • JavaScript InfoVis Toolkit crée des visualisation de données interactives en 2D avec canvas pour le Web.
    • 
  
  • EaselJS est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art
    • 
diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
index e2b627d4ed..80e8707ba3 100644
--- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
+++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
@@ -9,52 +9,52 @@ original_slug: HTML/Manipulating_video_using_canvas
 ---
 
    {{CanvasSidebar}}
    
 
-
    En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.
    
+
    En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.
    
 
-
    Voir l'exemple.
    
+
    Voir l'exemple.
    
 
 
    Le contenu du document
    
 
-
    Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :
    
-
-
    <!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      body {
-        background: black;
-        color:#CCCCCC;
-      }
-      #c2 {
-        background-image: url(foo.png);
-        background-repeat: no-repeat;
-      }
-      div {
-        float: left;
-        border :1px solid #444444;
-        padding:10px;
-        margin: 10px;
-        background:#3B3B3B;
-      }
-    </style>
-    <script type="text/javascript" src="main.js"></script>
-  </head>
-
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"></canvas>
-      <canvas id="c2" width="160" height="96"></canvas>
-    </div>
-  </body>
-</html>
    
+
    Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :
    
+
+
    <!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    </style>
+    <script type="text/javascript" src="main.js"></script>
+  </head>
+
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"></canvas>
+      <canvas id="c2" width="160" height="96"></canvas>
+    </div>
+  </body>
+</html>
    
 
 
    Les éléments clés à retenir sont :
    
 
 
      
- 
    1. Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
      2. 
+ 
    2. Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
      3. 
  
    3. Le code JavaScript est importé dans le script nommé main.js ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.
      4. 
  
    4. Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.
      5. 
 
    
@@ -67,93 +67,93 @@ original_slug: HTML/Manipulating_video_using_canvas
 
 
    La métode doLoad() est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (chroma-key), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.
    
 
-
    var processor;
-
-  processor.doLoad = function doLoad() {
-    this.video = document.getElementById('video');
-    this.c1 = document.getElementById('c1');
-    this.ctx1 = this.c1.getContext('2d');
-    this.c2 = document.getElementById('c2');
-    this.ctx2 = this.c2.getContext('2d');
-    let self = this;
-    this.video.addEventListener('play', function() {
-        self.width = self.video.videoWidth / 2;
-        self.height = self.video.videoHeight / 2;
-        self.timerCallback();
-      }, false);
-  },
    
+
    var processor;
+
+  processor.doLoad = function doLoad() {
+    this.video = document.getElementById('video');
+    this.c1 = document.getElementById('c1');
+    this.ctx1 = this.c1.getContext('2d');
+    this.c2 = document.getElementById('c2');
+    this.ctx2 = this.c2.getContext('2d');
+    let self = this;
+    this.video.addEventListener('play', function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
    
 
 
    Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément video et les deux éléments canvas. Il définit également les contextes graphique de chacun des éléments canvas. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.
    
 
 
    Ensuite, l'écouteur d'évènement addEventListener() est appelé sur l'élément video pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode timerCallback() pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.
    
 
-
    Le rappel du minuteur
    
+
    Le rappel du minuteur
    
 
-
    Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".
    
+
    Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".
    
 
-
    processor.timerCallback = function timerCallback() {
-    if (this.video.paused || this.video.ended) {
-      return;
-    }
-    this.computeFrame();
-    let self = this;
-    setTimeout(function() {
-        self.timerCallback();
-      }, 0);
-  },
    
+
    processor.timerCallback = function timerCallback() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function() {
+        self.timerCallback();
+      }, 0);
+  },
    
 
-
    La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.
    
+
    La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.
    
 
-
    Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet  "chroma-keying"  sur l'image vidéo en cours.
    
+
    Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet  "chroma-keying"  sur l'image vidéo en cours.
    
 
-
    La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer  un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.
    
+
    La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.
    
 
 
    Manipulation des données des images vidéo
    
 
 
    La méthode computeFrame() , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.
    
 
-
    processor.computeFrame = function computeFrame() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
-  }
    
+
    processor.computeFrame = function computeFrame() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
    
 
 
    ²
    
 
 
    Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :
    
 
-
    video.png
    
+
    
 
 
    À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode drawImage(). Voici ce que cela donne :
    
 
-
    sourcectx.png
    
+
    
 
-
    La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.
    
+
    La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.
    
 
-
    La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.
    
+
    La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.
    
 
-
    Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.
    
+
    Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.
    
 
-
    L'image résultante ressemble à ceci :
    
+
    L'image résultante ressemble à ceci :
    
 
-
    output.png
    
+
    
 
-
    Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.
    
+
    Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.
    
 
-
    Voyez cet exemple réel.
    
+
    Voyez cet exemple réel.
    
 
 
    Voir aussi
    
 
 
diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
index 6f98b0c468..d21ac69028 100644
--- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -6,20 +6,18 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
    
 
-
    
-
    Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.
    
-
    
+
    Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.
    
 
 
    Dessinons une balle
    
 
 
    Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.
    
 
-
    <canvas id="canvas" width="600" height="300"></canvas>
+
    <canvas id="canvas" width="600" height="300"></canvas>
 
    
 
 
    Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet ball contenant des propriétés et une méthode draw() afin de la placer sur le canevas.
    
 
-
    var canvas = document.getElementById('canvas');
+
    var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 var ball = {
@@ -42,9 +40,9 @@ ball.draw();
    
 
 
    Ajout de la vitesse
    
 
-
    Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.
    
+
    Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.
    
 
-
    var canvas = document.getElementById('canvas');
+
    var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -87,7 +85,7 @@ ball.draw();
 
 
    Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions x et y de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode draw :
    
 
-
    if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+
    if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
   ball.vy = -ball.vy;
 }
 if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
@@ -98,10 +96,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
 
 
    Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :
    
 
-
 
 
    {{EmbedLiveSample("Première_demo", "610", "310")}}
    
 
@@ -156,17 +152,16 @@ ball.draw();
    
 
 
    Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :
    
 
-
    ball.vy *= .99;
+
    ball.vy *= .99;
 ball.vy += .25;
    
 
 
    Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.
    
 
-
 
-
    {{EmbedLiveSample("Second_demo", "610", "310")}}
    
+
    {{EmbedLiveSample("deuxième_démo", "610", "310")}}
    
 
 
    Effet de traînée
    
 
 
    Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.
    
 
-
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
 ctx.fillRect(0,0,canvas.width,canvas.height);
    
 
-
 
-
    {{EmbedLiveSample("Third_demo", "610", "310")}}
    
+
    {{EmbedLiveSample("troisième_démo", "610", "310")}}
    
 
 
    Ajout d'un contrôle de souris
    
 
 
    Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement mousemove, par exemple. L'événement click relâche la balle et la laisse rebondir à nouveau.
    
 
-
+
 
-
    var canvas = document.getElementById('canvas');
+
    var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 var running = false;
@@ -365,13 +355,13 @@ ball.draw();
 
 
    Casse-briques
    
 
-
    Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.
    
+
    Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.
    
 
 
    Voir aussi
    
 
 
 
 
    {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index d7eb97ce5f..12d7d76e45 100644
--- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
@@ -12,11 +12,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
    
 
-
    
-
    Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.
    
-
    
+
    Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.
    
 
-
    Les couleurs
    
+
    Les couleurs
    
 
 
    Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : fillStyle et strokeStyle .
    
 
@@ -30,23 +28,23 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs
 
    color est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur #000000 de CSS color).
    
 
 
    
-
    Remarque:  Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.
    
+
    Note : Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.
    
 
    
 
 
    Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur.
    
 
-
    // Les valeurs possibles de fillStyle pour "orange"
+
    // Les valeurs possibles de fillStyle pour "orange"
 
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
    
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
    
 
-
    Un exemple fillStyle
    
+
    Un exemple fillStyle
    
 
 
    Dans cet exemple, nous utilisons une nouvelle fois deux boucles for pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables i et j pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i = 0; i < 6; i++) {
     for (var j = 0; j < 6; j++) {
@@ -57,44 +55,43 @@ ctx.fillStyle 
-
    <canvas id="canvas" width="150" height="150"></canvas>
    
+
+
+
 
-
    draw();
    
-
 
 
    Le résultat ressemble à ceci:
    
 
-
    {{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}
    
+
    {{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}
    
 
-
    Un exemple strokeStyle
    
+
    Un exemple strokeStyle
    
 
 
    Cet exemple est similaire à celui ci-dessus, mais utilise strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode arc() pour dessiner des cercles au lieu de carrés.
    
 
-
    function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i < 6; i++) {
-      for (var j = 0; j < 6; j++) {
-        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
-                         Math.floor(255 - 42.5 * j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-        ctx.stroke();
-      }
-    }
-  }
    
-
-
+
    function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
    
+
+
+
+
+
+
 
 
    Le résultat ressemble à ceci :
    
 
-
    {{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}
    
+
    {{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}
    
 
-
    Transparence
    
+
    Transparence
    
 
 
    En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de globalAlpha ou en attribuant une couleur semi-transparente à strokeStyle et/ou fillStyle.
    
 
@@ -107,7 +104,7 @@ ctx.fillStyle //Affecter des couleurs transparentes pour dessiner et remplir le style
+
    //Affecter des couleurs transparentes pour dessiner et remplir le style
 
 ctx.strokeStyle = "rgba(255, 0, 0, .5)";
 ctx.fillStyle = "rgba(255, 0, 0, .5)";
@@ -115,77 +112,74 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
 
    La fonction rgba() (rvba) est similaire à la fonction rgb() (rvb) mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).
    
 
-
    Un exemple globalAlpha
    
+
    Un exemple globalAlpha
    
 
 
    Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. globalAlpha est réglé à 0.2 et sera utilisé pour toutes les formes. Chaque étape de boucle for dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // règle la valeur de transparence
-  ctx.globalAlpha = 0.2;
-
-  // Dessine des cercles semi-transparents
-  for (i = 0; i < 7; i++) {
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
    
-
-
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // règle la valeur de transparence
+  ctx.globalAlpha = 0.2;
+
+  // Dessine des cercles semi-transparents
+  for (i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
    
+
+
+
 
-
    {{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}
    
+
 
-
    Un exemple en utilisant rgba()
    
+
    {{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}
    
+
+
    Un exemple en utilisant rgba()
    
 
 
    Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de rgba() nous donne un peu plus de contrôle et de flexibilité.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Dessine le fond
-  ctx.fillStyle = 'rgb(255, 221, 0)';
-  ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = 'rgb(102, 204, 0)';
-  ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = 'rgb(0, 153, 255)';
-  ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = 'rgb(255, 51, 0)';
-  ctx.fillRect(0, 112.5, 150, 37.5);
-
-  // Dessine des rectangles semi-transparents
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
-      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
-    }
-  }
-}
    
-
-
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-
    {{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}
    
+  // Dessine le fond
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Dessine des rectangles semi-transparents
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
    
+
+
+
+
 
-
    Le style des lignes
    
+
    {{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}
    
+
+
    Le style des lignes
    
 
 
    Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.
    
 
@@ -208,7 +202,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
 
    Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.
    
 
-
    Un exemple lineWidth
    
+
    Un exemple lineWidth
    
 
 
    Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.
    
 
@@ -216,28 +210,26 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
 
    Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
    
-
-
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
    
+
+
+
+
 
-
    {{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}
    
+
    {{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}
    
 
 
    Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.
    
 
-
    
+
    
 
 
    Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de 1.0, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de 1.0 dans l'exemple précédent.
    
 
@@ -246,19 +238,17 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
    
 
    Note: Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style lineCap, dont la valeur par défaut est butt. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style lineCap à square, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).
    
 
-
    Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.
    
+
    Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.
    
 
    
 
-
    Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .
    
+
    Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .
    
 
 
    Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.
    
 
-
    Un exemple de lineCap
    
+
    Un exemple de lineCap
    
 
 
    La propriété lineCap détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : butt, round et square. Par défaut, la propriété est définie à butt.
    
 
-
    
-
 
    
  
    butt (bout)
    
  
    L'extrémité des lignes est en angle droit.
    
@@ -272,322 +262,310 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
 
    La ligne de gauche utilise l'option par défaut butt. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option round. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Dessiner des guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Dessiner des lignes
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50, 140);
-    ctx.stroke();
-  }
-}
    
-
-
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Dessiner des guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Dessiner des lignes
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
    
 
-
    {{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}
    
+
 
-
    Un exemple de lineJoin
    
+
+
+
    {{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}
    
+
+
    Un exemple de lineJoin
    
 
 
    La propriété lineJoin détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).
    
 
 
    Il existe trois valeurs possibles pour cette propriété : round, bevel et miter. Par défaut, cette propriété est définie à miter. Notez que le paramètre lineJoin n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.
    
 
-
    
-
 
    
  
    round (rond)
    
  
    Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
    
  
    bevel (biseau)
    
  
    Ajoute un triangle à l'extrémité commune des segments connectés.
    
  
    miter (onglet)
    
- 
    Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
    
+ 
    Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
    
 
    
 
-
    L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.
    
-
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
    
-
-
 
-
    {{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}
    
+
    {{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}
    
 
-
    Une démonstration de la propriété miterLimit
    
+
    Une démonstration de la propriété miterLimit
    
 
-
    Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.
    
+
    Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.
    
 
-
    La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML  {{HTMLElement("canvas")}}).  miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.
    
+
    La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML  {{HTMLElement("canvas")}}).  miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.
    
 
-
    Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :
    
+
    Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :
    
 
 
      
  
    • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
      • 
- 
    • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
      • 
- 
    • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
      • 
- 
    • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
      • 
- 
    • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
      • 
+ 
    • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
      • 
+ 
    • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
      • 
+ 
    • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
      • 
+ 
    • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
      • 
 
    
 
-
    Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.
    
-
-
    Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).
    
-
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Éffacer canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Dessiner des guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Définir les styles de lignes
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // Vérifier l'entrée (input)
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Dessiner des lignes
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++) {
-    var dy = i % 2 == 0 ? 25 : -25;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
    
-
-
+
    Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.
    
+
+
    Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).
    
+
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Éffacer canvas
+  ctx.clearRect(0, 0, 150, 150);
 
-
    {{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}
    
+  // Dessiner des guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
 
-
    Utilisation de lignes pointillées
    
+  // Définir les styles de lignes
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // Vérifier l'entrée (input)
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Dessiner des lignes
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++) {
+    var dy = i % 2 == 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
    
+
+
+
+
+
+
    {{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}
    
+
+
    Utilisation de lignes pointillées
    
 
 
    setLineDash et lineDashOffset précisent le modèle de lignes. setLineDash accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et lineDashOffset définit un décalage pour commencer le motif.
    
 
-
    Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les  sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..
    
+
    Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les  sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..
    
 
-
+
 
-
    var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
+
    var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
 
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
 
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
 
-march();
    
+march();
    
 
-
    {{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}
    
+
    {{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}
    
 
-
    Dégradés
    
+
    Dégradés
    
 
-
    Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.
    
+
    Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
    
- 
    Crée un objet dégradé linéaire avec un point de départ (x1, y1) et un point final (x2, y2).
    
+ 
    Crée un objet dégradé linéaire avec un point de départ (x1, y1) et un point final (x2, y2).
    
  
    {{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
    
- 
    Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
    
+ 
    Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
    
 
    
 
 
    Par exemple:
    
 
-
    var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
    
+
    var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
    
 
-
    Une fois que nous avons créé un objet CanvasGradient, nous pouvons lui assigner des couleurs en utilisant la méthode addColorStop ().
    
+
    Une fois que nous avons créé un objet CanvasGradient, nous pouvons lui assigner des couleurs en utilisant la méthode addColorStop ().
    
 
 
    
  
    {{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
    
- 
    Crée un nouvel arrêt de couleur sur l'objet gradient (dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
    
+ 
    Crée un nouvel arrêt de couleur sur l'objet gradient (dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
    
 
    
 
-
    Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.
    
+
    Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.
    
 
-
    var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
    
+
    var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
    
 
-
    Un exemple de createLinearGradient
    
+
    Un exemple de createLinearGradient
    
 
-
    Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.
    
+
    Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  // Créer un dégradé
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
+  // Créer un dégradé
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
 
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
 
-  // assigner des dégradés aux styles "fill" et "stroke"
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
+  // assigner des dégradés aux styles "fill" et "stroke"
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
 
-  // Dessiner des formes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
+  // Dessiner des formes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
 
-}
    
+}
    
 
-
 
-
    Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.
    
-
-
    Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.
    
-
-
    {{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}
    
+
    Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.
    
 
-
    Un exemple de createRadialGradient
    
+
    Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.
    
 
-
    Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).
    
+
    {{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+
    Un exemple de createRadialGradient
    
 
-  // Créer un dégradé
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
    Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).
    
 
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
-
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
-
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  // dessiner des formes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0, 0, 150, 150);
-}
    
+  // Créer un dégradé
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // dessiner des formes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
    
 
-
+
 
-
    Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.
    
+
    Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.
    
 
-
    Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).
    
+
    Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).
    
 
-
    {{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}
    
+
    {{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}
    
 
-
    Modèles
    
+
    Modèles
    
 
-
    Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().
    
+
    Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
    
- 
    Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  type  est une chaîne indiquant comment utiliser l'image.
    
+ 
    Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  type  est une chaîne indiquant comment utiliser l'image.
    
 
    
 
-
    Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :
    
+
    Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :
    
 
 
    
  
    repeat
    
- 
    Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
    
+ 
    Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
    
  
    repeat-x
    
  
    Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
    
  
    repeat-y
    
@@ -596,125 +574,120 @@ lineargradient.Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :
    
+
    Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :
    
 
-
    var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
    
+
    var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
    
 
 
    
-
    Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.
    
+
    Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.
    
 
    
 
-
    Un exemple de createPattern
    
+
    Un exemple de createPattern
    
 
-
    Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.
    
+
    Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  // créer un nouvel objet image à utiliser comme modèle
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
+  // créer un nouvel objet image à utiliser comme modèle
+  var img = new Image();
+  img.src = 'canvas_createpattern.png';
+  img.onload = function() {
 
-    // créer le modèle
-    var ptrn = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0, 0, 150, 150);
+    // créer le modèle
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
 
-  }
-}
    
+  }
+}
    
 
-
 
-
    {{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}
    
+
    {{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}
    
 
 
    Ombres
    
 
-
    L'utilisation des ombres ne comporte que quatre propriétés :
    
+
    L'utilisation des ombres ne comporte que quatre propriétés :
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
    
- 
    Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
    
+ 
    Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
    
  
    {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
    
- 
    Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
    
+ 
    Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
    
  
    {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
    
- 
    Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
    
+ 
    Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
    
  
    {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
    
  
    Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
    
 
    
 
-
    Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.
    
+
    Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.
    
 
-
    La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
    
+
    La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
    
 
-
    La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.
    
+
    La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.
    
 
 
    
-
    Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.
    
+
    Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.
    
 
    
 
-
    Un exemple de texte ombré
    
+
    Un exemple de texte ombré
    
 
-
    Cet exemple dessine une chaîne de texte avec un effet d'ombrage.
    
+
    Cet exemple dessine une chaîne de texte avec un effet d'ombrage.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
 
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
 
-  ctx.font = '20px Times New Roman';
-  ctx.fillStyle = 'Black';
-  ctx.fillText('Sample String', 5, 30);
-}
    
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
    
 
-
+
 
-
    {{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}
    
+
    {{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}
    
 
-
    Nous allons regarder la propriété de la  font (police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.
    
+
    Nous allons regarder la propriété de la  font (police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.
    
 
-
    Règles de remplissage Canvas
    
+
    Règles de remplissage Canvas
    
 
-
    Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et  {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) ,  déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
    
+
    Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et  {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) ,  déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
    
  
    
  Deux valeurs sont possibles :
    
 
 
 
 
    Dans cet exemple, nous utilisons la règle evenodd .
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
    
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
    
 
-
 
-
    {{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}
    
+
    {{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}
    
 
 
    {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
index 95fa3c4f0e..e37d15eba9 100644
--- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
@@ -13,13 +13,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
    
 
-
    
 
    Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.
    
-
    
 
 
    La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.
    
 
-
    Les étapes d'une animation basique
    
+
    Les étapes d'une animation basique
    
 
 
    Voici les étapes à suivre à chaque image dessinée (frame) :
    
 
@@ -34,7 +32,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
   Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
 
 
-
    Contrôle d'une animation
    
+
    Contrôle d'une animation
    
 
 
    Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.
    
 
@@ -60,20 +58,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
 
    Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.
    
 
 
    
-
    Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.
    
+
    Note : Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.
    
 
    
 
 
    Un système terrestre animé
    
 
 
    Cette exemple anime un petit modèle de notre système terrestre.
    
 
-
    var sun = new Image();
+
    var sun = new Image();
 var moon = new Image();
 var earth = new Image();
 function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  sun.src = 'canvas_sun.png';
+  moon.src = 'canvas_moon.png';
+  earth.src = 'canvas_earth.png';
   window.requestAnimationFrame(draw);
 }
 
@@ -116,17 +114,15 @@ function draw() {
 init();
 
    
 
-
+
 
-
    {{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}
    
+
    {{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}
    
 
 
    Une horloge animée
    
 
 
    Cette exemple dessine une horloge animée qui affiche l'heure actuelle.
    
 
-
    function clock(){
+
    function clock(){
   var now = new Date();
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.save();
@@ -225,22 +221,20 @@ init();
 
 window.requestAnimationFrame(clock);
    
 
-
+
 
-
    {{EmbedLiveSample("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}
    
+
    {{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}
    
 
 
    Un panorama défilant en boucle
    
 
-
    Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.
    
+
    Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.
    
 
-
    var img = new Image();
+
    var img = new Image();
 
 // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
 // directions, et la vitesse.
 
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+img.src = 'capitan_meadows_yosemite_national_park.jpg';
 var CanvasXSize = 800;
 var CanvasYSize = 200;
 var speed = 30; // plus elle est basse, plus c'est rapide
@@ -324,16 +318,16 @@ function draw() {
 
 
    En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.
    
 
-
    <canvas id="canvas" width="800" height="200"></canvas>
    
+
    <canvas id="canvas" width="800" height="200"></canvas>
    
 
 
    {{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}
    
 
-
    Autres exemples
    
+
    Autres exemples
    
 
 
    
- 
    Un raycaster basique avec canvas
    
+ 
    Un raycaster basique avec canvas
    
  
    Un bon exemple d'animation contrôlée par le clavier.
    
- 
    Animations avancées
    
+ 
    Animations avancées
    
  
    Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
    
 
    
 
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
index 79129b01ae..0faa7a82ec 100644
--- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -16,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 
 
    Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.
    
 
-
    <canvas id="tutoriel" width="150" height="150"></canvas>
+
    <canvas id="tutoriel" width="150" height="150"></canvas>
 
    
 
 
    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. 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, 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.
    
@@ -29,7 +29,6 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 
 
    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.
    
 
-
    
 
    Contenu de repli
    
 
 
    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.
    
@@ -38,7 +37,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 
 
    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.
    
 
-
    <canvas id="stockGraph" width="150" height="150">
+
    <canvas id="stockGraph" width="150" height="150">
   current stock price: $3.15 + 0.15
 </canvas>
 
@@ -58,21 +57,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 
 
    Le contexte de rendu
    
 
-
    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, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.
    
+
    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, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.
    
 
 
    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 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".
    
 
-
    var canvas = document.getElementById('tutorial');
+
    var canvas = document.getElementById('tutorial');
 var ctx = canvas.getContext('2d');
    
 
 
    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().
    
 
-
    
 
    Vérification de la prise en charge
    
 
 
    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 :
    
 
-
    var canvas = document.getElementById('tutorial');
+
    var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
@@ -80,14 +78,13 @@ if (canvas.getContext) {
 } else {
   // code pour le cas où canvas ne serait pas supporté
 }
    
-
    
-
    
+
 
 
    Un modèle basique
    
 
 
    Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8"/>
@@ -119,7 +116,7 @@ if (canvas.getContext) {
 
 
    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.
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8"/>
@@ -145,6 +142,6 @@ if (canvas.getContext) {
 
 
    Cet exemple ressemble a ceci :
    
 
-
    {{EmbedLiveSample("Un_exemple_simple", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}
    
+
    {{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}
    
 
 
    {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
index 0cde521d32..f2992ea69d 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
@@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
 
 
    Ce code configure les valeurs globales utilisées par le reste du programme.
    
 
-
    var canvas1 = document.createElement("canvas");
+
    var canvas1 = document.createElement("canvas");
 var canvas2 = document.createElement("canvas");
 var gco = [ 'source-over','source-in','source-out','source-atop',
             'destination-over','destination-in','destination-out','destination-atop',
@@ -65,7 +65,7 @@ var height = 340;
 
 
    Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:
    
 
-
    window.onload = function() {
+
    window.onload = function() {
     // lum en sRGB
     var lum = {
         r: 0.33,
@@ -86,7 +86,7 @@ var height = 340;
 
 
    Et dans le code suivant, runComposite() gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.
    
 
-
    function createCanvas() {
+
    function createCanvas() {
     var canvas = document.createElement("canvas");
     canvas.style.background = "url("+op_8x8.data+")";
     canvas.style.border = "1px solid #000";
@@ -162,7 +162,7 @@ function runComposite() {
 
 
    Notre programme repose sur un certain nombbre de fonctions utilitaires:
    
 
-
    var lightMix = function() {
+
    var lightMix = function() {
     var ctx = canvas2.getContext("2d");
     ctx.save();
     ctx.globalCompositeOperation = "lighter";
@@ -186,7 +186,7 @@ function runComposite() {
 };
 
    
 
-
    var colorSphere = function(element) {
+
    var colorSphere = function(element) {
     var ctx = canvas1.getContext("2d");
     var width = 360;
     var halfWidth = width / 2;
@@ -218,7 +218,7 @@ function runComposite() {
 };
 
    
 
-
    // HSV (1978) = H: Hue / S: Saturation / V: Value
+
    // HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
     var H = o.H / 360,
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
index 8cde4179fa..0ce19656af 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
@@ -10,11 +10,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
    
 
-
    
 
    Dans tous nos exemples précédents, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.
    
-
    
 
-
    globalCompositeOperation
    
+
    globalCompositeOperation
    
 
 
    Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.
    
 
@@ -27,13 +25,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 
 
    {{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}
    
 
-
    Détourage
    
+
    Détourage
    
 
-
    Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
    
+
    Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
    
+
+
 
 
    Si nous comparons le détourage à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.
    
 
-
    Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.
    
+
    Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.clip", "clip()")}}
    
@@ -42,13 +42,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 
 
    Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un détourage.
    
 
-
    Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
    
+
    Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
    
 
-
    Un exemple de clip
    
+
    Un exemple de clip
    
 
 
    Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -96,16 +96,14 @@ function drawStar(ctx, r) {
 }
 
    
 
-
+
 
 
    Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.
    
 
 
    Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.
    
 
-
    {{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}
    
+
    {{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
    
 
 
    {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 66e04ba19f..b265fb649a 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -14,17 +14,18 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}
    
 
-
    Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
    
+
    Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
    
 
 
    La grille
    
 
-
    Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
    
+
    Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
    
+
+
 
 
    Dessin de rectangles
    
 
-
    Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
    
+
    Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
    
 
-
    
 
    Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :
    
 
 
    
@@ -42,16 +43,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Exemple de forme rectangulaire
    
 
-
 
-
    function draw() {
+
    function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -64,7 +63,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Le résultat de cet exemple est montré ci-dessous.
    
 
-
    {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}
    
+
    {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}
    
 
 
    La fonction fillRect() dessine un grand carré noir de 100 pixels de côté. La fonction clearRect() efface ensuite un carré de 60x60 pixels, et finalement, la fonction strokeRect() est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.
    
 
@@ -78,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
      
  
    1. Tout d'abord, vous devez créer le trajet.
      2. 
- 
    2. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
      3. 
+ 
    3. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
      4. 
  
    4. Finalement, vous devez fermer le trajet.
      5. 
  
    5. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
      6. 
 
    
@@ -88,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
    
  
    {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
    
  
    Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.
    
- 
    Méthodes de trajet
    
+ 
    Méthodes de trajet
    
  
    Méthodes pour définir différents trajets pour les objets.
    
  
    {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
    
  
    Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.
    
@@ -100,28 +99,30 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    La première étape pour créer un trajet est d'appeler beginPath(). En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.
    
 
-
    Note : lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
    
+
    
+  
    Note : Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
    
+
    
 
 
    La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.
    
 
 
    La troisième méthode, optionnelle, est l'appel à closePath(). Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.
    
 
-
    Note : quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
    
+
    
+  
    Note : Quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
    
+
    
 
 
    Dessin d'un triangle
    
 
 
    Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -137,7 +138,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Le résultat ressemble à :
    
 
-
    {{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}
    
+
    {{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}
    
 
 
    Déplacement du stylo
    
 
@@ -152,16 +153,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction draw() que nous avons vue plus tôt.
    
 
-
 
-
    function draw() {
+
    function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -181,12 +180,12 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Le résultat ressemble à ce qui suit :
    
 
-
    {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}
    
+
    {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}
    
 
 
    Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent moveTo().
    
 
 
    
-
    Note : pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.
    
+
    Note : Pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.
    
 
    
 
 
    Les lignes
    
@@ -202,16 +201,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -236,7 +233,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.
    
 
-
    {{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}
    
+
    {{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}
    
 
 
    Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le closePath() pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.
    
 
@@ -254,31 +251,29 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
    Regardons plus en détail la méthode arc, qui prend six paramètres : x et y sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. rayon se passe d'explication. Les paramètres angleInitial et angleFinal définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre antihoraire est une valeur booléenne qui, lorsque true, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.
    
 
 
    
-
    Note : les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.
    
+
    Note : Les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.
    
 
    
 
 
    L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.
    
 
-
    Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
    
+
    Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
    
 
 
    Les coordonnées x et y devraient être claires. rayon et angleInitial sont fixés. L'angleFinal commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.
    
 
 
    L'instruction pour le paramètre antihoraire a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction if fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.
    
 
 
    
-
    Note : cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
    
+
    Note : Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
    
 
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -306,7 +301,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
    
 
-
    {{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
    
+
    {{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}
    
 
 
    Les courbes quadratiques et de Bézier
    
 
@@ -319,7 +314,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
  
    Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y).
    
 
    
 
-
    La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
    
+
    La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
    
+
+
    
 
 
    Les paramètres x et y de ces deux méthodes sont les coordonnées du point d'arrivée. cp1x et cp1y sont les coordonnées du premier point de contrôle, et  cp2x et cp2y sont les coordonnées du second point de contrôle.
    
 
@@ -331,16 +328,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -359,22 +354,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
    
 
-
    {{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}
    
+
    {{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}
    
 
 
    Les courbes de Bézier cubiques
    
 
 
    Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -393,7 +386,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 }
 
    
 
-
    {{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}
    
+
    {{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}
    
 
 
    Rectangles
    
 
@@ -410,16 +403,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
 
    Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -507,14 +498,11 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
 
 
    L'image résultante ressemble à ce qui suit :
    
 
-
    
 
    {{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}
    
 
 
    Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété fillStyle sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi()). L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.
    
 
 
    Nous reviendrons sur fillStyle plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.
    
-
    
-
    
 
 
    Objets Path2D
    
 
@@ -523,14 +511,14 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
 
 
    
  
    {{domxref("Path2D.Path2D", "Path2D()")}}
    
- 
    Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
    
+ 
    Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
    
 
    
 
 
    new Path2D();     // objet trajet vide
 new Path2D(trajet); // copie depuis un autre objet Path2D
 new Path2D(d);    // trajet depuis des données de trajet SVG
    
 
-
    Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.
    
+
    Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.
    
 
 
    L'API Path2D ajoute aussi une manière de combiner des trajets en utilisant la méthode addPath. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.
    
 
@@ -543,16 +531,14 @@ new Path2D(d);    // trajet depuis des données de trajet SVG
    
 
 
    Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets Path2D, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API Path2D, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet Path2D à utiliser au lieu du trajet en cours. Ici, stroke et fill sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.
    
 
-
 
-
    function dessiner() {
+
    function dessiner() {
   var canevas = document.getElementById('canvas');
   if (canevas.getContext){
     var ctx = canevas.getContext('2d');
@@ -569,13 +555,13 @@ new Path2D(d);    // trajet depuis des données de trajet SVG
    
   }
 }
    
 
-
    {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}
    
+
    {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}
    
 
 
    Utilisation de trajets SVG
    
 
-
    Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
    
+
    Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
    
 
-
    Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.
    
+
    Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.
    
 
 
    var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
    
 
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
index 463e89310b..4a1dfdcfa8 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -11,7 +11,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}
    
 
-
    Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
    
+
    Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
    
 
 
    Dessin de texte
    
 
@@ -24,60 +24,56 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
  
    Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
    
 
    
 
-
    Un exemple fillText
    
+
    Un exemple fillText
    
 
-
    Le texte est rempli en utilisant le fillStyle actuel.
    
+
    Le texte est rempli en utilisant le fillStyle actuel.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
    
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
    
 
-
+
 
 
    {{EmbedLiveSample("A_fillText_example", 310, 110)}}
    
 
-
    Un exemple de strokeText
    
+
    Un exemple de strokeText
    
 
-
    Le texte est rempli en utilisant le  strokeStyle courant.
    
+
    Le texte est rempli en utilisant le  strokeStyle courant.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
    
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
    
 
-
+
 
 
    {{EmbedLiveSample("A_strokeText_example", 310, 110)}}
    
 
-
    Style de texte
    
+
    Style de texte
    
 
-
    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. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
    
+
    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. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.font", "font = value")}}
    
- 
    Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
    
+ 
    Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
    
  
    {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
    
- 
    Paramètre d'alignement du texte. Valeurs possibles :  start (début),  end (fin),  left (gauche),  right (droite) ou  center (centre). La valeur par défaut est start.
    
+ 
    Paramètre d'alignement du texte. Valeurs possibles :  start (début),  end (fin),  left (gauche),  right (droite) ou  center (centre). La valeur par défaut est start.
    
  
    {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
    
- 
    Paramètre d'alignement de base. Valeurs possibles :  top (haut),  hanging (suspendu),  middle (moyen),  alphabetic (alphabétique),  ideographic (idéographique),  bottom (en bas). La valeur par défaut est alphabetic.
    
+ 
    Paramètre d'alignement de base. Valeurs possibles :  top (haut),  hanging (suspendu),  middle (moyen),  alphabetic (alphabétique),  ideographic (idéographique),  bottom (en bas). La valeur par défaut est alphabetic.
    
  
    {{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
    
- 
    Directionnalité. Valeurs possibles:  ltr (de gauche à droite),  rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.
    
+ 
    Directionnalité. Valeurs possibles:  ltr (de gauche à droite),  rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.
    
 
    
 
-
    Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.
    
+
    Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.
    
 
-
    Le diagramme suivant du  WHATWG  illustre les différentes lignes de base prises en charge par la propriété textBaseline.
    
+
    Le diagramme suivant du  WHATWG  illustre les différentes lignes de base prises en charge par la propriété textBaseline.
    
 
 
    The top of the em square is
 roughly at the top of the glyphs in a font, the hanging baseline is
@@ -92,71 +88,69 @@ baselines, due to glyphs extending far outside the em square.Un exemple de textBaseline
 
-
    Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :
    
+
    Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :
    
 
-
    ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
    
+
    ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
    
 
-
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
    
 
 
    {{ EmbedLiveSample('Playable_code', 700, 360) }}
    
 
-
    Mesures de texte avancées
    
+
    Mesures de texte avancées
    
 
-
    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.
    
+
    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.
    
 
 
    
  
    {{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
    
- 
    Retourne un objet  {{domxref("TextMetrics")}}  contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
    
+ 
    Retourne un objet  {{domxref("TextMetrics")}}  contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
    
 
    
 
-
    L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.
    
+
    L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.
    
 
-
    function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // objet TextMetrics
-  text.width; // 16;
-}
    
+
    function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // objet TextMetrics
+  text.width; // 16;
+}
    
 
-
    Notes spécifiques à Gecko
    
+
    Notes spécifiques à Gecko
    
 
-
    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. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.
    
+
    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. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.
    
 
 
    {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
index c02ef18e12..4370d57dec 100644
--- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
@@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
 ---
 
    {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
    
 
-
    L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
    
+
    L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
    
 
 
    Moyen de repli
    
 
 
    Le contenu à l'intérieur d'un tag <canvas> ... </canvas> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur html5accessibility.com demontre comment cela peut être fait.
    
 
-
    <canvas>
+
    <canvas>
   <h2>Shapes</h2>
   <p>A rectangle with a black border.
    In the background is a pink circle.
@@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
 
 
    Accessible Rich Internet Applications (ARIA) (≈ Les applications Internet Accessibles Riches) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir ARIA et les techniques ARIA pour plus d'informations.
    
 
-
    <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
    <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
 
    
 
 
    Zones cibles (hit Region)
    
@@ -47,7 +47,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
 
 
    Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.
    
 
-
    <canvas id="canvas"></canvas>
+
    <canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -66,7 +66,7 @@ canvas.addEventListener('mousemove', function(event) {
 
 
    La méthode addHitRegion() accepte aussi une option de control pour envoyer des événement vers un élément (c'est un enfant des canvas):
    
 
-
    ctx.addHitRegion({control: element});
    
+
    ctx.addHitRegion({control: element});
    
 
 
    Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi codepen demo.
    
 
diff --git a/files/fr/web/api/canvas_api/tutorial/index.html b/files/fr/web/api/canvas_api/tutorial/index.html
index 43019f1319..d10b22ec7a 100644
--- a/files/fr/web/api/canvas_api/tutorial/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/index.html
@@ -12,42 +12,40 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas
 ---
 
    {{CanvasSidebar}}
    
 
-
    
+
    <canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.
    
 
-
    <canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.
    
+
    Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
    
 
-
    Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
    
+
    D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.
    
 
-
    D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.
    
+
    Avant de commencer
    
 
-
    Avant de commencer
    
+
    L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de  canvas  est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width. Afin de dessiner des graphiques sur  canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.
    
 
-
    L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de  canvas  est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width. Afin de dessiner des graphiques sur  canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.
    
-
-
    Dans ce tutoriel
    
+
    Dans ce tutoriel
    
 
 
 
-
    Voir aussi
    
+
    Voir aussi
    
 
 
 
 
    {{ Next("Tutoriel_canvas/Utilisation_de_base") }}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
index 4d7f4358d2..700966e07c 100644
--- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -6,9 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
    
 
-
    
 
    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.
    
-
    
 
 
    Conseils sur les performances
    
 
@@ -18,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
 
 
    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.
    
 
-
    myEntity.offscreenCanvas = document.createElement("canvas");
+
    myEntity.offscreenCanvas = document.createElement("canvas");
 myEntity.offscreenCanvas.width = myEntity.width;
 myEntity.offscreenCanvas.height = myEntity.height;
 myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
@@ -30,7 +28,7 @@ myEntity.render(myEntity.offscreenContext);
 
 
    Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.
    
 
-
    ctx.drawImage(myImage, 0.3, 0.5);
+
    ctx.drawImage(myImage, 0.3, 0.5);
 
    
 
 
    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()")}}.
    
@@ -45,7 +43,7 @@ myEntity.render(myEntity.offscreenContext);
 
 
    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é.
    
 
-
    <div id="stage">
+
    <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>
@@ -73,7 +71,7 @@ myEntity.render(myEntity.offscreenContext);
 
 
    Les 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.
    
 
-
    var scaleX = window.innerWidth / canvas.width;
+
    var scaleX = window.innerWidth / canvas.width;
 var scaleY = window.innerHeight / canvas.height;
 
 var scaleToFit = Math.min(scaleX, scaleY);
@@ -87,7 +85,7 @@ stage.style.transform = "scale(" + scaleToFit + ")";
 
 
    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.
    
 
-
    <canvas id="mycanvas" moz-opaque></canvas>
    
+
    <canvas id="mycanvas" moz-opaque></canvas>
    
 
 
    D'autres conseils
    
 
@@ -100,7 +98,7 @@ stage.style.transform = "scale(" + scaleToFit + ")";
  
  • 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.
    • 
+ 
  • Tester les performances avec JSPerf.
    • 
 
 
 
    Voir aussi
    
diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
index 56bd411943..053a07aa30 100644
--- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
@@ -6,9 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
    
 
-
    
 
    Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.
    
-
    
 
 
    L'objet ImageData
    
 
@@ -29,51 +27,49 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas
 
 
    Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :
    
 
-
    composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
    
+
    composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
    
 
 
    Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut Uint8ClampedArray.length :
    
 
-
    var nbOctets = imageData.data.length;
+
    var nbOctets = imageData.data.length;
 
    
 
 
    Création d'un objet ImageData
    
 
 
    Pour créer un nouvel objet ImageData vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode createImageData() :
    
 
-
    var monImageData = ctx.createImageData(largeur, hauteur);
    
+
    var monImageData = ctx.createImageData(largeur, hauteur);
    
 
 
    Cela crée un nouvel objet ImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.
    
 
 
    Vous pouvez aussi créer un nouvel objet ImageData ayant les mêmes dimensions que celles de l'objet indiqué par autreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. Cela ne copie pas les données d'image !
    
 
-
    var monImageData = ctx.createImageData(autreImageData);
    
+
    var monImageData = ctx.createImageData(autreImageData);
    
 
 
    Obtention des données pixel pour un contexte
    
 
 
    Pour obtenir un objet  ImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode getImageData() :
    
 
-
    var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
    
+
    var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
    
 
 
    Cette méthode retourne un objet ImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (left,top)  (gauche,haut), (left+width, top) (gauche+largeur, haut), (left, top+height) (gauche, haut+hauteur) et  (left+width, top+height) (gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.
    
 
 
    
-
    Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.
    
+
    Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.
    
 
    
 
-
    Cette méthode est aussi présentée dans l'article Manipulation vidéo utilisant canvas.
    
+
    Cette méthode est aussi présentée dans l'article Manipulation vidéo utilisant canvas.
    
 
 
    Une pipette à couleur
    
 
-
    Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.
    
+
    Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.
    
 
-
 
 
    var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.src = './assets/rhino.jpg';
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 img.onload = function() {
@@ -97,33 +93,31 @@ canvas.addEventListener('mousemove', pick);
    
 
 
    Peinture des données pixel dans un contexte
    
 
-
    Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :
    
+
    Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :
    
 
-
    ctx.putImageData(monImageData, dx, dy);
+
    ctx.putImageData(monImageData, dx, dy);
 
    
 
 
    Les paramètres dx et dy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.
    
 
 
    Par exemple, pour peindre l'image entière représentée par monImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :
    
 
-
    ctx.putImageData(monImageData, 0, 0);
+
    ctx.putImageData(monImageData, 0, 0);
 
    
 
 
    Niveaux de gris et inversion de couleurs
    
 
 
    Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.
    
 
-
 
-
    var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
    var img = new Image();
+img.src = './assets/rhino.jpg';
 img.onload = function() {
   dessiner(this);
 };
@@ -166,20 +160,19 @@ function dessiner(img) {
 
 
    Zoom et anticrénelage
    
 
-
    A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété  {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.
    
+
    A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété  {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.
    
 
-
    Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.
    
+
    Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.
    
 
-
    zoomctx.drawImage(canvas,
+
    zoomctx.drawImage(canvas,
                   Math.abs(x - 5), Math.abs(y - 5),
                   10, 10, 0, 0, 200, 200);
    
 
-
    Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).
    
+
    Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).
    
 
-
+
    Exemple de zoom
    
 
-
 
-
    var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
 
-
    {{ EmbedLiveSample('Zoom_example', 620, 490) }}
    
+
    {{ EmbedLiveSample('exemple_de_zoom', 620, 490) }}
    
 
 
    Sauvegarde des images
    
 
-
    L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en  PNG ). L'image renvoyée est dans une résolution de 96 dpi.
    
+
    L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en  PNG ). L'image renvoyée est dans une résolution de 96 dpi.
    
 
 
    
  
    {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
    
  
    Par défaut. Crée un image PNG.
    
  
    {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
    
- 
    Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
    
+ 
    Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
    
 
    
 
-
    Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.
    
+
    Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.
    
 
-
    Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.
    
+
    Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.
    
 
 
    
  
    {{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
    
- 
    Crée un objet Blob représentant l'image contenue dans le canevas.
    
+ 
    Crée un objet Blob représentant l'image contenue dans le canevas.
    
 
    
 
 
    Voir aussi
    
 
 
 
diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
index 61443be765..eec783769b 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 ---
 
    {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}
    
 
-
    Précédemment dans ce tutoriel, nous avons étudié la grille du canevas 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.
    
+
    Précédemment dans ce tutoriel, nous avons étudié la grille du canevas 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.
    
 
 
    Sauvegarde et restauration d'état
    
 
@@ -39,7 +39,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.
    
 
-
    function draw() {
+
    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
@@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
 }
    
 
-
+
 
 
    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.
    
 
@@ -72,17 +70,19 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    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.
    
 
-
    {{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}
    
+
    {{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}
    
 
 
    Déplacement
    
 
-
     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.
    
+
    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.
    
 
 
    
  
    {{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.
    
 
    
 
+ 
+
 
    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.
    
 
 
    Un exemple translate
    
@@ -91,7 +91,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    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.
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i = 0; i < 3; i++) {
     for (var j = 0; j < 3; j++) {
@@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   }
 }
    
 
-
+
 
-
    {{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}
    
+
+
    {{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}
    
 
 
    Rotation
    
 
-
    La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.
    
+
    La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.
    
 
 
    
  
    {{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.
    
 
    
 
+
+
 
    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 ().
    
 
 
    Un exemple rotate
    
@@ -128,10 +129,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
    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 ().
    
 
 
    
-
    Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.
    
+
    Note : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.
    
 
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // rectangles de gauche, rotation depuis l'origine du canevas
@@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    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.
    
 
-
+
 
-
    {{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}
    
+
    {{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}
    
 
 
    Mise à l'échelle
    
 
@@ -188,7 +187,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // dessine un rectangle simple, mais le met à l'échelle.
@@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillText('MDN', -135, 120);
 }
    
 
-
+
 
-
    {{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}
    
+
    {{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}
    
 
 
    Transformation
    
 
@@ -217,11 +214,8 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    
  
    {{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
    
- 
    Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
    
-
    
-
-
    
- 
    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.
    
+ 
    Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : 
    [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+ 
    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.
    
 
    
 
 
    Les paramètres de cette fonction sont :
    
@@ -247,7 +241,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
    Exemple pour transform et setTransform
    
 
-
    function draw() {
+
    function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
@@ -266,12 +260,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(0, 50, 100, 100);
 }
    
 
-
+
 
-
    {{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}
    
+
    {{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}
    
 
 
    {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}
    
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
index a90c9ff8b3..cd72e968a9 100644
--- a/files/fr/web/api/canvas_api/tutorial/using_images/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images
 ---
 
    {{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
    
 
-
    Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des sprites dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !
    
+
    Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des sprites dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !
    
 
 
    L'importation d'images dans un canevas se déroule en deux étapes :
    
 
@@ -125,22 +125,20 @@ function getMyVideo() {
 
    
 
 
    
-
    Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.
    
+
    Note : Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.
    
 
    
 
 
    Exemple : un graphique linéaire simple
    
 
 
    Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement load de l'objet image pour lancer les instructions de dessin. La méthode drawImage() place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.
    
 
-
+
    
 
 
     function draw() {
@@ -178,18 +176,16 @@ function draw() {
 
    Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle for s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.
    
 
 
    
-
    Note : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.
    
+
    Note : Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.
    
 
    
 
-
 
 
     function draw() {
-- 
cgit v1.2.3-54-g00ecf