recursal/MDN huggingface dataset:
CanvasRenderingContext2D.beginPath()
====================================

La méthode **`CanvasRenderingContext2D.beginPath()`** de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

Syntaxe
-------


```js
void ctx.beginPath();
```

Exemples
--------

### Utiliser la méthode `beginPath`

Ceci est un simple snippet de code qui utilise la méthode `beginPath`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Premier chemin
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second chemin
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:200px">
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120, 120);
ctx.stroke();</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-beginpath-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui définit cette méthode, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.closePath()`
CanvasRenderingContext2D.strokeText()
=====================================

La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée *(x, y)*. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

Voir aussi la méthode `CanvasRenderingContext2D.fillText()` pour dessiner un texte rempli.

Syntaxe
-------


```js
void ctx.strokeText(texte, x, y [, largeurMax]);
```

### Paramètres

`texte`

Le texte à tracer en utilisant les valeurs en cours de `font`, `textAlign`, `textBaseline`, et `direction`.


`x`

La coordonnée sur l'axe des x du point de départ du texte.

`y`

La coordonnée sur l'axe des y du point de départ du texte.

`largeurMax` Facultatif

La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.

Exemples
--------

### Utilisation de la méthode `strokeText`

Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`.

#### HTML


```html
<canvas id="canevas"></canvas>
```


#### JavaScript


```js
var canevas = document.getElementById("canevas");
var ctx = canevas.getContext("2d");

ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);
```


Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-stroketext-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillText()`
CanvasRenderingContext2D.transform()
====================================

La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

Voir aussi la méthode `setTransform()` qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`.

Syntaxe
-------


```js
void ctx.transform(a, b, c, d, e, f);
```


La matrice de transformation est décrite par : 


[

a

c

e

b

d

f

0

0

1

]

\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

### Paramètres

`a (m11)`

Échelle horizontale.

*`b (m12)`*

Inclinaison horizontale.

`c (m21)`

Inclinaison verticale.

`d (m22)`

Échelle verticale.

`e (dx)`

Déplacement horizontal.

`f (dy)`

Déplacement vertical.

Exemples
--------

### Utilisation de la méthode `transform`

Ceci est seulement un fragment de code simple utilisant la méthode `transform`.

#### HTML


```html
<canvas id="canevas"></canvas>
```


#### JavaScript


```js
var canevas = document.getElementById("canevas");
var ctx = canevas.getContext("2d");

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.transform(1,1,0,1,0,0);
ctx.fillRect(0,0,100,100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  eval(textarea.value);
  ctx.restore();
}

reset.addEventListener("click", function () {
  textarea.value = code;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-transform-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.setTransform()`
CanvasRenderingContext2D.textAlign
==================================

La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width.

Syntaxe
-------


```js
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
```

### Options

Valeurs possibles :

left

Le texte est aligné à gauche.

right

Le texte est aligné à droite.

center

Le texte est centré.

start

Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).

end

Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).

La valeur pa défaut est `start`.

Exemples
--------

### Utilisation de la propriété `textAlign`

Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);
```


Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = '48px serif';
ctx.textAlign = 'left';
ctx.strokeText('Hello world', 0, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-textalign-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`.
CanvasRenderingContext2D.quadraticCurveTo()
===========================================

La méthode **`CanvasRenderingContext2D.quadraticCurveTo()`** de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode `moveTo()` avant de créer la courbe quadratique de Bézier.

Syntaxe
-------


```js
void contexte2D.quadraticCurveTo(
  pointContrôleX,
  pointContrôleY,
  pointArrivéeX,
  pointArrivéeY,
);
```

### Paramètress

`pointContrôleX`

La coordonnée en x du point de contrôle.

`pointContrôleY`

La coordonnée en y du point de contrôle.

`pointArrivéeX`

La coordonnée en x du point d'arrivée.

`pointArrivéeY`

La coordonnée en y du point d'arrivée.

Exemples
--------

### Comment quadraticCurveTo fonctionne

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

// courbe quadratique de Bézier
contexte2D.beginPath();
contexte2D.moveTo(50, 20);
contexte2D.quadraticCurveTo(230, 30, 50, 100);
contexte2D.stroke();

// Points de départ et d'arrivée
contexte2D.fillStyle = "blue";
contexte2D.beginPath();
contexte2D.arc(50, 20, 5, 0, 2 \* Math.PI); // Point de départ
contexte2D.arc(50, 100, 5, 0, 2 \* Math.PI); // Point d'arrivée
contexte2D.fill();

// Point de contrôle
contexte2D.fillStyle = "red";
contexte2D.beginPath();
contexte2D.arc(230, 30, 5, 0, 2 \* Math.PI);
contexte2D.fill();
```


#### Résultat

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

### Une courbe quadratique simple

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode `quadraticCurveTo()`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

La courbe commence au point spécifié par `moveTo()`: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).


```js
const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

contexte2D.beginPath();
contexte2D.moveTo(20, 110);
contexte2D.quadraticCurveTo(230, 150, 250, 20);
contexte2D.stroke();
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-quadraticcurveto-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface définissant cette méthode : `CanvasRenderingContext2D`
* L'article Wikipédia sur les courbes quadratiques de Bézier
CanvasRenderingContext2D.font
=============================

La propriété **`CanvasRenderingContext2D.font`** de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.

Syntaxe
-------


```js
ctx.font = value;
```

### Options

`valeur`

Une valeur `DOMString` analysée comme une valeur de `font` CSS. La police par défaut est 10px sans-serif.

Exemples
--------

### Utilisation de la propriété `font`

Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);
```


Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

### Chargement de polices avec l'API CSS Font Loading

A l'aide de l'API `FontFace` (en-US), vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.


```js
var f = new FontFace("test", "url(x)");

f.load().then(function () {
  // Prêt à utiliser la police dans un contexte de canevas
});
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-font-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
CanvasRenderingContext2D.bezierCurveTo()
========================================

La méthode **`CanvasRenderingContext2D.bezierCurveTo()`** de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode `moveTo()` avant de créer une courbe de Bézier.

Syntaxe
-------


```js
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
```

### Paramètres

`cp1x`

L'abscisse du premier point de contrôle.

`cp1y`

L'ordonnée du premier point de contrôle.

`cp2x`

L'abscisse du second point de contrôle.

`cp2y`

L'ordonnée du second point de contrôle.

`x`

L'abscisse du point d'arrivée.

`y`

L'ordonnée du point d'arrivée.

Exemples
--------

### Fonctionnement de bezierCurveTo()

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
// Define canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Define the points as {x, y}
let debut = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let fin = { x: 250, y: 100 };

// Courbe de Bézier cubique
ctx.beginPath();
ctx.moveTo(debut.x, debut.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
ctx.stroke();

// Points de début et d'arrivée
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(debut.x, debut.y, 5, 0, 2 \* Math.PI); // Début
ctx.arc(fin.x, fin.y, 5, 0, 2 \* Math.PI); // Fin
ctx.fill();

// Points de contrôles
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 \* Math.PI); // Point de contrôle n°1
ctx.arc(cp2.x, cp2.y, 5, 0, 2 \* Math.PI); // Point de contrôle n°2
ctx.fill();
```


#### Résultat

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

### Une courbe cubique de Bézier simple

Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCurveTo()`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).


```js
const canvas = document.getElementById("canvas");
const contexte2D = canvas.getContext("2d");

contexte2D.beginPath();
contexte2D.moveTo(30, 30);
contexte2D.bezierCurveTo(120, 160, 180, 10, 220, 140);
contexte2D.stroke();
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-beziercurveto-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface définissant cette méthode : `CanvasRenderingContext2D`
* L'article Wikipédia sur les courbes de Bézier
CanvasRenderingContext2D.clearRect()
====================================

La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées *(x, y)* et par les tailles *(largeur, hauteur)*, supprimant tout contenu précédemment dessiné.

Syntaxe
-------


```js
void ctx.clearRect(x, y, largeur, hauteur);
```

### Paramètres

`x`

La coordonnée sur l'axe des *x* du point de départ du rectangle.

`y`

La coordonnée sur l'axe des *y* du point de départ du rectangle.

`largeur`

La largeur du rectangle.

`hauteur`

La hauteur de rectangle.

Notes d'utilisation
-------------------

Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler `beginPath()` avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`.

Exemples
--------

### Utilisation de la méthode `clearRect`

Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canevas = document.getElementById("canvas");
var ctx = canevas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(120, 120);
ctx.closePath(); // dessine la dernière ligne du triangle
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);

// effacer le canevas entièrement
// ctx.clearRect(0, 0, canvas.width, canvas.height);
```


Modifiez le code suivant et voyez vos changements en direct dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // dessine la dernière ligne du triangle
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-clearrect-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect()`
* `CanvasRenderingContext2D.strokeRect()`
CanvasRenderingContext2D.measureText()
======================================

La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet `TextMetrics` qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).

Syntaxe
-------


```js
ctx.measureText(texte);
```

### Paramètres

texte

Le texte à mesurer.

### Valeur retournée

Un objet `TextMetrics`.

Exemples
--------

Étant donné cet élément `<canvas>` :


```html
<canvas id="canevas"></canvas>
```


vous pouvez obtenir un objet `TextMetrics` en utilisant le code suivant :


```js
var canevas = document.getElementById("canevas");
var ctx = canevas.getContext("2d");

var texte = ctx.measureText("foo"); // objet TextMetrics
texte.width; // 16;
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-measuretext-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`.
* `TextMetrics`