HTML5 Canvas Text Property
Use Canvas properties for basic text.
Context's Font Setting
1.The Fonts for the drawing Context can be defined using CSS, just like we define for HTML elements using all-in-one CSS font property.
2.You can also include @font-face property on your CSS stylesheet, and then use it on your canvas. Thus, attaining complete independence form platforms or browser variations.
Syntax : context's font setting.Give it a TRY! »
1.The direction of text by default is from left-to-right(ltr).However, that can be altered by defining the canvas dir property to rtl .
2.The context's dir property can assume two values, ltr (left to right) or rtl(right to left)
Example: Canvas text direction.Give it a TRY! » Exercise- Change the
ltr. Notice, the position of " ! " symbol.
Text Horizontal Alignment: textAlign.
1.The horizontal alignment of text on the canvas is defined by context's textalign attribute.
2.The possible values
textAlign can assume is start, end, left, right and center .
Example: textAlign property.Give it a TRY! » Exercise- Change the
left| right| start| end. Notice the change in alignment.
Text Vertical Alignment: textBaseline .
1.The text's baseline or Vertical anchor point is defined by the attribute textBaseline.
2.The default value for
textBaseline is alphabetic baseline.
3.The baseline values of top , middle, bottom and alphabetic are understood.
hanging:Baseline is used for Devanagari, Bengali and Gurmukhi scripts.
ideographic: Baseline is used for logographic scripts of Japanese, Chinese, Taiwanese, Korean and Vietnamese.