Texte HTML Canvas

Dessiner du texte sur le canevas

Les attributs et méthodes les plus importants pour dessiner du texte sur le canevas sont :

• font - Définit les attributs de police du texte
• fillText(text,x,y) - Dessinez du texte "rempli" sur le canevas
• strokeText(text,x,y) - Dessinez du texte sur le canevas (sans remplissage)

Utilisez fillText()

Exemple

Définissez la police en "30px Arial" et écrivez du texte sur le canevas (rempli) :

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Essayez-le vous-même

Utilisez strokeText()

Exemple

Définissez la police en "30px Arial" et écrivez du texte sur le canevas (sans remplissage) :

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Essayez-le vous-même

Ajoutez une couleur et alignez le texte au centre

Exemple

Définissez la police en "30px Comic Sans MS" et écrivez du texte en rouge au centre du canevas :

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Essayez-le vous-même

Veuillez également consulter :

Manuel complet Canvas de CodeW3C.com