After you set the font property, you can proceed to draw the text with the fillText() method. You can even apply a gradient fill for the text. We will take a look at some examples below.
font Property
The font property sets or returns the current font properties for text content on the canvas. This property uses the same syntax as the CSS font property.
fillText() Method
The fillText() method draws filled text on the canvas. The default color of the text is black. We can use the font and fillstyle properties to customize the format of the text.
Syntax
Example
textAlign Property
The textAlign property sets or returns the current alignment for text content, according to the starting value. Generally, the text will start in the position specified and paint to the left, but the textAlign property will place the text according to the alignment value.
Example
textBaseline Property
The textBaseline property sets or returns the current text baseline used when drawing text. Note that different browsers will interpret this property differently. The default value for this property is alphabetic.
Example
strokeText Method
The strokeText() method draws text on the canvas. The default color of the text is black. The strokeText() method adds no fill to the text. You can use a solid color or gradient fill for the outline of the text.
