W3docs
fr
Se connecter

Coordonnées du Canvas

Découvrez le système de coordonnées du canvas HTML, et apprenez à dessiner un cercle et une ligne grâce à nos exemples de code.

Le canvas HTML est un élément puissant d'HTML5 qui permet de créer et de manipuler des graphiques sur une page web à l'aide de JavaScript. L'élément <canvas> fournit une surface de dessin bidimensionnelle que l'on peut considérer comme une grille ou un système de coordonnées.

Cette page explique le fonctionnement du système de coordonnées du canvas, comment lire et écrire des points sur celui-ci, et comment déplacer, mettre à l'échelle et faire pivoter ce système à l'aide de transformations. Si vous découvrez l'élément lui-même, commencez par l'introduction au Canvas.

Le système de coordonnées

La grille du canvas part du coin supérieur gauche, qui a les coordonnées (0, 0). À partir de là :

  • L'axe x augmente vers la droite.
  • L'axe y augmente vers le bas (c'est l'inverse de ce qu'on apprend en cours de mathématiques, où y augmente vers le haut).

Chaque point du canvas est une paire (x, y) mesurée en pixels à partir de cette origine en haut à gauche.

(0,0)──────── x increases → ────────►
  │  ┌───────────────────────────────┐
  │  │ (0,0)                  (300,0) │
  y  │                               │
  │  │            (150,75)           │
  ▼  │                               │
     │ (0,150)              (300,150)│
     └───────────────────────────────┘

Pour un canvas 300 × 150, (0, 0) est le coin supérieur gauche, (300, 0) est le coin supérieur droit, (0, 150) est le coin inférieur gauche, et (150, 75) est le centre exact.

Le contexte de rendu 2D

On ne dessine jamais directement sur l'élément <canvas>. On lui demande plutôt un contexte de rendu — un objet qui expose les méthodes de dessin (moveTo, lineTo, arc, fillRect, etc.) :

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

getContext("2d") retourne le contexte 2D utilisé dans tous les exemples ci-dessous. (D'autres types de contextes existent, comme "webgl" pour la 3D, mais "2d" est celui utilisé pour le dessin sur canvas.) Chaque coordonnée passée à une méthode du contexte est interprétée dans la grille décrite ci-dessus.

Dessiner une ligne

Les méthodes ci-dessous sont utilisées pour tracer une ligne droite sur un canvas :

  • moveTo(x,y), qui spécifie le point de départ de la ligne
  • lineTo(x,y), qui spécifie le point d'arrivée de la ligne

Utilisez l'une des méthodes « d'encrage » pour tracer une ligne, par exemple stroke().

Exemple de l'élément HTML <canvas> pour dessiner une ligne :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      const c = document.getElementById("canvasExample");
      const ctx = c.getContext("2d");
      // Starting point (0,0) is the top-left corner
      ctx.moveTo(0, 0);
      // Ending point (300,150) matches the canvas width and height
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#359900';
      ctx.stroke();
    </script>
  </body>
</html>
Essayez vous-même »

Dans l'exemple ci-dessus, la ligne est tracée en diagonale de (0, 0) (coin supérieur gauche) à (300, 150) (coin inférieur droit). Remarquez que cette ligne seule n'a pas besoin de beginPath() : lorsque rien n'a encore été dessiné, moveTo/lineTo démarrent automatiquement un nouveau tracé. Le cercle ci-dessous utilise beginPath() car il s'agit d'une forme distincte — voir l'explication dans cette section.

Pour d'autres formes et remplissages basés sur le même système de coordonnées, consultez Canvas drawing.

Dessiner un cercle

Les méthodes ci-dessous sont utilisées pour dessiner un cercle sur un canvas :

  • beginPath(), qui commence un nouveau tracé afin que le cercle ne soit pas connecté à ce qui a été dessiné avant lui.
  • arc(x, y, r, startAngle, endAngle), qui ajoute un arc (une portion de cercle) au tracé en cours.

Les paramètres de arc()

ParamètreSignification
x, yLes coordonnées du centre du cercle.
rLe rayon, en pixels.
startAngleL'angle de début de l'arc, en radians.
endAngleL'angle de fin de l'arc, en radians.

Les angles sont mesurés en radians, et non en degrés. 0 pointe vers la droite (l'axe x positif), et la rotation se fait dans le sens des aiguilles d'une montre. Un tour complet vaut 2 * Math.PI radians (360°), donc un cercle complet va de 0 à 2 * Math.PI.

Pour convertir des degrés en radians, multipliez par Math.PI / 180 :

const radians = degrees * (Math.PI / 180);

Arcs partiels

Il n'est pas obligatoire de dessiner un cercle complet. Utilisez un angle de fin plus petit pour ne tracer qu'une partie. Par exemple, un arc de 0 à Math.PI (un demi-tour) dessine la moitié inférieure d'un cercle, car y augmente vers le bas :

// A half-circle (bottom half) centered at (100, 75) with radius 50
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI);
ctx.stroke();

Exemple de l'élément HTML <canvas> pour dessiner un cercle :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      const canvas = document.getElementById("exampleCanvas");
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      // Center at (125, 95), radius 70. 125 is half of the 250 width.
      ctx.arc(125, 95, 70, 0, 2 * Math.PI);
      ctx.strokeStyle = '#1c87c9';
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>
Essayez vous-même »

Dans l'exemple ci-dessus, le cercle est centré en (125, 95) avec un rayon de 70.

beginPath() et closePath()

Ces deux méthodes prêtent souvent à confusion :

  • beginPath() supprime tout tracé en cours et en démarre un nouveau. Appelez-la avant chaque forme indépendante — sinon la nouvelle forme est rattachée à la précédente, et un seul stroke()/fill() leur applique le même style.
  • closePath() trace une ligne droite du point actuel jusqu'au point de départ du tracé, « fermant » ainsi le contour. Pour un cercle complet, la fin rejoint déjà le début, donc closePath() n'a ici aucun effet visible — elle est incluse par habitude et est utile lors de la construction de formes ouvertes comme un polygone.

L'exemple de ligne précédent n'avait besoin d'aucune de ces méthodes car il s'agissait d'un tracé unique et autonome. Dès que vous dessinez une deuxième forme, pensez à utiliser beginPath().

Transformations de coordonnées

Au lieu de recalculer chaque coordonnée manuellement, vous pouvez déplacer, redimensionner ou faire pivoter l'ensemble du système de coordonnées. Les transformations s'appliquent à tout ce que vous dessinez après les avoir appelées.

Un schéma courant consiste à encadrer le dessin transformé dans save() et restore() afin que la grille revienne à la normale ensuite :

ctx.save();      // remember the current coordinate system
// ...transform and draw...
ctx.restore();   // put the coordinate system back

translate(x, y)

Déplace l'origine (0, 0) vers une nouvelle position. Après translate(50, 30), dessiner en (0, 0) apparaîtra en réalité en (50, 30) :

ctx.translate(50, 30);
ctx.fillRect(0, 0, 80, 40); // top-left corner now sits at (50, 30)

scale(x, y)

Multiplie la taille de chaque coordonnée et dimension. scale(2, 2) double tout ; scale(1, 0.5) conserve la largeur mais divise la hauteur par deux :

ctx.scale(2, 2);
ctx.fillRect(10, 10, 30, 30); // drawn at (20, 20), 60×60 in real pixels

rotate(angle)

Fait pivoter le système de coordonnées dans le sens des aiguilles d'une montre autour de l'origine actuelle. L'angle est en radians, comme pour arc(). Comme la rotation se produit autour de (0, 0), vous utilisez généralement translate() d'abord pour vous placer au pivot souhaité :

ctx.translate(100, 75);          // move origin to the pivot point
ctx.rotate(45 * Math.PI / 180);  // rotate 45° clockwise
ctx.fillRect(-25, -25, 50, 50);  // a square centered on the pivot

Les transformations conservent vos coordonnées dans la même grille que vous avez utilisée — elles déplacent ou redimensionnent simplement cette grille. Pour dessiner du texte positionné sur ce système, consultez Canvas text.

Pratique

Pratique
Quelles sont les caractéristiques des coordonnées de l'élément HTML5 <canvas> ?
Quelles sont les caractéristiques des coordonnées de l'élément HTML5 <canvas> ?
Was this page helpful?