texte
Canvas permet d'écrire du texte
Définition : Écriture
Texte plein
1
ctx.fillText(texte, x, y);
1
ctx.fillText("texte", 40, 40);
Canvas - Texte
Texte contour
1
ctx.strokeText(texte, x, y);
1
ctx.strokeText('texte', 40, 40);
Canvas - Texte
Définition : Style
Police
1
ctx.font = value;
1
ctx.font = '40px serif';
2
ctx.fillText('texte serif', 20, 40);
3
ctx.font = '40px arial';
4
ctx.fillText('texte arial', 20, 80);
Canvas - Texte
Alignement : left, right, center, start, end
1
ctx.textAlign= value;
1
ctx.textAlign = 'center';
2
ctx.fillText('center', 100, 40);
3
ctx.textAlign = 'left';
4
ctx.fillText('left', 100, 80);
5
ctx.textAlign = 'right';
6
ctx.fillText('right', 100, 120);
Canvas - Texte
Ligne de base : top, hanging, middle, alphabetic, ideographic, bottom
1
ctx.textBaseline = value;
1
ctx.textBaseline = 'alphabetic';
2
ctx.fillText('alphabetic', 0, 60);
3
ctx.textBaseline = 'top';
4
ctx.fillText('top', 40, 60);
5
ctx.textBaseline = 'hanging';
6
ctx.fillText('hanging', 170, 60);
7
ctx.textBaseline = 'middle';
8
ctx.fillText('middle', 100, 60);
9
ctx.textBaseline = 'bottom';
10
ctx.fillText('bottom', 180, 60);
Canvas - Texte