HTML5 canvas provides two ways to render text.

Related methods:

//Fills the specified text in the specified (x, y) position
//text: Specifies the text to output on the canvas.
//x: the X coordinate position (relative to the canvas) at which the text starts to be drawn.
//y: the Y coordinate position (relative to the canvas) at which the text starts to be drawn.
//maxWidth: optional. Maximum text width allowed in pixels.
context.fillText(text, x, y, maxWidth);

//Draws a text border at the specified (x, y) position
//text: Specifies the text to output on the canvas.
//xX: the X coordinate position (relative to the canvas) at which the text starts to be drawn.
//y: the Y coordinate position (relative to the canvas) at which the text starts to be drawn.
//maxWidth: optional. Maximum text width allowed in pixels.
context.strokeText(text, x, y, maxWidth);

For example:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Verdana";
ctx.fillText("Hello World!",10,70);
ctx.strokeText("Hello World!",10,100);

Style of rendered text

We can set the text style through the following properties:

//Set the style of drawing text, including font, size, etc. This string uses the same syntax as the CSS font property. The default font is 10px sans serif.
context.font = value

//Sets or returns the current alignment of the text content.
//start: default. The text starts at the specified location.
//end: the text ends at the specified location.
//center: the center of the text is placed at the specified location.
//left: align text left.
//right: align text to the right.
context.textAlign="center|end|left|right|start"

//Sets or returns the current text baseline when the text is drawn.
//alphabetic: default. The text baseline is a normal letter baseline.
//top: the text baseline is the top of the EM box..
//hanging: the text baseline is a hanging baseline.
//middle: the text baseline is the middle of the EM box.
//ideographic: the text baseline is the ideographic baseline.
//bottom: the text baseline is the bottom of the EM box.
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"

//Set text direction
//inherit: inherit the < canvas > element or document as appropriate.
//ltr: text direction is left to right.
//rtl: the text direction is right to left.
context.direction= "inherit|ltr|rtl"

Set text font and style

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.font="30px Verdana";
ctx.fillText("Hello World!",10,50);
ctx.strokeText("Hello World!",10,80);

ctx.font="italic small-caps bold 20px arial";
ctx.fillText("Hello World!",10,130);
ctx.strokeText("Hello World!",10,150);

More style parameters

font-style : Specifies the font style. Optional values: normal, italic, oblique
font-variant : Specifies the font variant. Optional values: normal, small caps
font-weight : Specifies the weight of the font. Optional values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size / line-height : Specifies the font size and line height in pixels.
font-family : Specifies font family.
caption : use the font of the Title Control (such as button, drop-down list, etc.).
icon : use the font used to mark the icon.
menu : use the font used in the menu (drop-down list and menu list).
message-box : use the font used in the dialog box.
small-caption : use the font used to mark small controls.
status-bar : use the font used in the window status bar.

Set text alignment

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.strokeStyle="red";
ctx.moveTo(100,0);
ctx.lineTo(100,200);
ctx.stroke();

//Show different textalign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",100,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",100,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",100,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",100,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",100,140);

Set text baseline

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,100);
ctx.stroke();

ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",30,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",65,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",100,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",150,100);

Set the direction of the text

Setting direction will affect the property setting of textalign. It will replace the display effect of left and right. For example:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.direction ="rtl";
ctx.textAlign="start";
ctx.fillText("textAlign=start",100,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",100,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",100,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",100,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",100,140);

When ctx.direction = "rtl", it will be displayed as:

Usually, the direction feature is invalid by default. Only Safari browser can display normally, and Google browser needs to be enabled through experiential canvas features, while other browsers do not implement this feature.