HTML Canvas - Text

Text can be rendered on the Canvas element using the available methods and properties. We can also style the drawn text so that efficient graphics can be generated.

The TextMetrics interface and CanvasRenderingcontext2D is used to draw and style text as well as to identify the structural properties of text rendered inside the Canvas element. The text is generally rendered using a CanvasRenderingContext2D object by available methods and also can be retrieved using read-only properties.

Properties

The properties available to draw and style text on the Canvas element are listed in the below table.

S.No Property and Description
1 actualBoundingBoxAscent

This property returns the distance from the horizontal line indicated by the baseline property to the rectangle top from which text is drawn inside the Canvas.
2 actualBoundingBoxDescent

This property returns the distance from the horizontal line indicated by the baseline property to the rectangle bottom from which text is drawn inside the Canvas.
3 actualBoundingBoxLeft

This property returns the distance parallel to the text baseline to the left side of bounding rectangle of text in pixels.
4 actualBoundingBoxRight

This property returns the distance parallel to the text baseline to the right side of bounding rectangle of text in pixels.
5 direction

The direction property specifies the direction of text which is about to be drawn onto the Canvas element.
6 font

This property of Canvas API specifies the text size, style and font style of the text about to be drawn onto the Canvas element.
7 fontBoundingBoxAscent

This property of the TextMetrics interface returns the distance from horizontal line of text baseline to the top of highest bounding rectangle of the text inside canvas element.
8 fontBoundingBoxDescent

This property of the TextMetrics interface returns the distance from horizontal line of text baseline to the bottom of highest bounding rectangle of the text inside canvas element.
9 textAlign

This property of Canvas element object specifies the text alignment to be used when drawing text.
10 textBaseline

This property of Canvas element object specifies the text baseline to be used when drawing text.

Methods

Following are various methods available to perform various operations on the Text element of HTML Canvas.

S.No Method & Description
1 fillText()

This method fills the text drawn on the Canvas element.
2 MeasureText()

when this method is used, the text information which is drawn onto the canvas is returned.
3 strokeText()

This method adds strokes to the text to be drawn on the Canvas element.
Advertisements