W3docs
fr
Se connecter

Texte Canvas

HTML5 canvas allows creating text using font and text properties. See examples of the fillText, strokeText properties, and example of adding color and centering text.

Le canevas HTML5 permet de créer du texte en utilisant différentes propriétés de police et de texte présentées ci-dessous :

Propriétés et Méthodes

Propriété / MéthodeDescription
fontIl renvoie les paramètres de police actuels et peut être défini pour modifier la police.
textAlignIl renvoie les paramètres d'alignement du texte actuels et peut être défini pour modifier l'alignement. La propriété prend les valeurs suivantes : start, end, left, right et center. Notez que start et end dépendent de la direction du texte.
textBaselineIl renvoie les paramètres d'alignement de la ligne de base actuels et peut être défini pour modifier l'alignement de la ligne de base. La propriété prend les valeurs suivantes : top, hanging, middle, alphabetic, ideographic et bottom.
fillStyleDéfinit la couleur utilisée pour remplir le texte.
strokeStyleDéfinit la couleur utilisée pour tracer le contour du texte.
fillText(text, x, y)Dessine un texte rempli à la position indiquée par les coordonnées x et y données.
strokeText(text, x, y)Trace le contour du texte à la position indiquée par les coordonnées x et y données.

Exemple de la méthode fillText() :

Exemple de la méthode fillText()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>
Essayez vous-même »

Exemple de la méthode strokeText() :

Exemple de la méthode strokeText()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>
Essayez vous-même »

Exemple d'ajout de couleur et de centrage du texte :

Exemple d'ajout de couleur et de centrage du texte

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique

Quelle est la fonctionnalité de la méthode 'fillText()' du canevas HTML5 concernant le texte ?