Search within TutorialsPark

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! »


Text Direction.

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 dir property to ltr. Notice, the position of " ! " symbol.


Text Horizontal Alignment: textAlign.

text alignment canvas html5

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 textAlign property to left| right| start| end. Notice the change in alignment.


Text Vertical Alignment: textBaseline .

text Baseline canvas HTML5

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.

Example: Setting textBaseline property

Give it a TRY! »



Related Examples

Related Tags