HTML5 Canvas draw text

HTML5 Canvas can use various fonts, sizes, and colors in HTML5Draw text on the canvas, the appearance of the text is controlled by these2D Context font attribute control, to draw text, please use fillText() or strokeText() function.

Online example

You can use various fonts, sizes, and colors in HTML5Draw text on the canvas.
The appearance of the text is controlled by these2D Context font attribute control. In addition, you need to set fillStyle or strokeStyle according to whether you want to draw filled text or stroked text2D Context attribute.
To draw text, please use the fillText() or strokeText() function
This is a simple code example:

<canvas id="ex1" width="500" height="100" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d);
　　　context.font = ""36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML",5　Canvas Text　50,　50);
　　　context.font = "normal"　36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML"5　Canvas Text　50,　90);
　</script>

This is the result when drawing on the canvas:

Font and style

in HTML5When drawing text on the canvas, it is necessary to set the font to be used. This is done by setting2The value of the D context font attribute is completed. This attribute is a string with CSS compatible values, formatted as:

[font style][font weight][font size][font face]

For example

context.font = "normal normal　20px Verdana";

The following values can be set for each part of the font string:

Please note that not all browsers support all values. You will need to test the values you plan to use before relying on them.
Here is another example:

"italic bold"　36px Arial"

Drawing text

As mentioned earlier, in HTML5When drawing text on the canvas, you can draw filled text or outline text. You can use2The D context function fillText() and the operation strokeText(). The definitions of these functions are as follows:

fillText(textString, x, y[, maxWidth]);
strokeText(textString, x, y[, maxWidth]);

The textString parameter is the text to be drawn.
The x and y represent the position obtained in the text. The x parameter is where the text starts. The y parameter is the vertical position where the text is placed, but the exact representation depends on the text baseline. The text baseline will be introduced later.
The maxWidth text is overlaid on the following part.
Here is an example code:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);

Maximum width of text

Optional maxWidth parameter tells the canvas that the text cannot occupy more space horizontally than the given parameter value. If the text is too wide and cannot fit maxWidth, the width of the text will be compressed. It is not cut off. Here is an example code showing the same text drawn with and without maxWidth:

context.font = ""36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML",5　Canvas Text　50,　50);
context.fillText("HTML",5　Canvas Text　50,　100,　200);

This is in HTML5The appearance of these two texts when drawn on the canvas:

As you can see, the width of the second text is compressed to fit maxWidth 200 pixels.

Text Color

Like any other shape, use2The fillStyle and strokeStyle properties of the D context set the color of the fill or stroke of the text. I will not go into more detail about these properties. For more information, seeStroking and Filling.

Measuring text width

2The D context object has a function that can measure the pixel width of text. It cannot measure height. This function is called measureText(). Here is a code example:

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

Measuring the width of the text can be used to calculate whether a text string fits a specific space, etc.

Text Baseline

The text baseline determines how to interpret the y parameter. In other words, the position of the vertically placed text and how this position is interpreted. Note that there may also be subtle differences in how browsers interpret this property. fillText()strokeText()
Using textBaseline2The D context properties set the text baseline. The following are the values it can adopt and their meanings:

This is an example where the y value is the same for all the text (75）Draw text, but use a different baseline for each drawn text. Draw a line y=75to show you how to set the text baseline around the y value.

The following is the code to generate the above graphics:

context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo( 0,　75);
context.lineTo(500,　75);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0,　75);
context.textBaseline = "hanging";
context.fillText("hanging",　40,　75);
context.textBaseline = "middle";
context.fillText("middle"　120,　75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic",　200,　75);
context.textBaseline = "ideographic";
context.fillText("ideographic",　300,　75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph",　400,　75);

Text Alignment

2The textAlign property of the D context defines how the text is horizontally aligned when drawn. In other words, the textAlign property defines the x coordinate when drawing text.

Here are some examples that show how the textAlign attribute works. The vertical line is drawn at x = 250. All the text is also drawn with x = 250, but the value of the textAlign attribute is different.

This is an example of graphical code:

<canvas id="ex4" width="500" height="120" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d);
context.strokeStyle = "#000000";
context.lineWidth =　1;
context.beginPath();
context.moveTo(　250, 0);
context.lineTo(　250,　250);
context.stroke();
context.closePath();
context.font = ""16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center",　250,　20);
context.textAlign = "start";
context.fillText("start",　250,　40);
context.textAlign = "end";
context.fillText("end",　250,　60);
context.textAlign = "left";
context.fillText("left",　250,　80);
context.textAlign = "right";
context.fillText("right",　250,　100);
</script>

The code runs as follows: