HTML5 Canvas-Text and Fonts - HTML 5

How to apply text and fonts on canvas in HTML5?

HTML5 canvas offers a capability for creating text using different font and text properties as shown below

Sr.No.

Property and Description

1

font [ = value ]

font [ = value ] property is used to return current font settings and can be set to change the font.

2

textAlign [ = value ]

textAlign [ = value ] property is used to return current text alignment settings and can be set, to change the alignment. Possible values are start, end, left, right, and center.

3

textBaseline [ = value ]

textBaseline [ = value ] property is used to return the current baseline alignment settings and can be set to change the baseline alignment. Possible values are top, hanging, middle , alphabetic, ideographic and bottom

4

fillText(text, x, y [, maxWidth ] )

fillText(text, x, y [, maxWidth ] ) property is used to fill the given text at a given position indicated by the given coordinates x and y.

5

strokeText(text, x, y [, maxWidth ] )

strokeText(text, x, y [, maxWidth ] ) property is used to stroke the given text at a given position indicated by the given coordinates x and y.

Example

Below is a simple example is used to draw a text

Output

hello world

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics