Méthode measureText()
Exemple
Vérifiez la largeur du texte avant de l'écrire sur le canevas :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
let txt = "Hello World";
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100); Voir aussi :
La propriété font (Définir la police et la taille du texte)
La propriété fillStyle (Définir la couleur/gradient du texte)
La propriété textAlign (Définir l'alignement du texte)
La propriété textBaseline (Définir la ligne de base du texte)
La méthode fillText() (Dessiner le texte)
La méthode strokeText() (Dessiner le texte)
Description
La méthode measureText() renvoie un objet contenant la largeur du texte spécifié, en pixels.
Astuce : Utilisez cette méthode si vous devez connaître la largeur d'un texte avant de l'écrire sur le canevas.
| Syntaxe JavaScript : | context .measureText( text ).width; |
|---|
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| text | Le texte à mesurer |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
measureText() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |