Text Manipulation Using Canvas in HTML5

Specifying Text Baseline using Canvas in HTML5

We use the textBaseline property to align text in the HTML5 Canvas. The textBaseline property can be aligned to any of the values listed below. By default, the textBaseline property has the "alphabetic" value.

There are six options available for specifying the baseline of the text :

Top It represents the top of the em square.
Hanging It represents a hanging baseline.
Middle It represents the middle of the em square.
Alphabetic It represents an alphabetic baseline.
Ideographic It represents an ideographic baseline.
Bottom It represents the bottom of the em square.

Syntax

<script>
context.textBaseline = 'middle';
</script>

Examples

In the following example the first the text is aligned to the top at y=40:

ctx.textBaseline = "top";
ctx.fillText("Hello", 0, 40);

Then the text is aligned to the center at y=40:

ctx.textBaseline = "middle";
ctx.fillText("Hello", 150, 40);

At last the text is aligned to the bottom at y=40:

ctx.textBaseline = "bottom";
ctx.fillText("Hello", 300, 40);

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.textAlign = "start";
ctx.fillStyle = "blue";
ctx.font = "40px verdana";
// The top of the text will be aligned at y = 40
ctx.textBaseline = "top";
ctx.fillText("Hello", 0, 40);
// The vertical centre of the text will be aligned at y = 40
ctx.textBaseline = "middle";
ctx.fillText("Hello", 150, 40);
// The bottom of the text will be aligned at y = 40
ctx.textBaseline = "bottom";
ctx.fillText("Hello", 300, 40);
}
}
</script>
<title>Specify text baseline</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas>
<br>
</body>
</html>

Output

Measuring Text in the HTML5 canvas

In order to get the text metrics of the canvas we use the measureText() method that measures the width of a given text in pixels and returns a textMetrics object containing the width property.

When this method is used a text string is required.

Syntax

<script>
var metrics = context.measureText('measure!');
var width = metrics.width;
</script>

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px verdana";
// You don't have to draw the text on canvas to measure its width. This is only for reference
ctx.fillText("Noida", 0, 40);
// The width of the text will vary with font size. The width is in pixels and is returned as a textMetrics object.
var textWidth = ctx.measureText("Noida");
// The width of the text is contained in the textMetrics object.width
alert("Text Width: " + textWidth.width);
}
}
</script>
<title>Measuring Text </title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas>
<br>
</body>
</html>

Output

Specifying Text Alignment

We can use the text alignment property of the Canvas to set the alignment of the text. If we do not specify any alignment then by default it will be "start".

Text alignment can be done in five different ways:

Start The text begins at the location specified in the strokeText() or fillText() method and text direction is from left to right (ltr).
Left The text is aligned to the left. This is similar to using "start". The text is aligned to the left, with the starting point at the location specified in the strokeText() or fillText() method.
End The text ends at the location specified in the strokeText() or fillText() method and the text direction is from right to left (rtl).
Right This is similar to using "end". The resulting text will end at the point specified in the strokeText() or fillText() method. It means that the text is aligned to the right.
Centre The text is aligned to the center. The center of the text will be aligned with the point specified in the strokeText() or fillText() method.

Syntax

<script>
context.textAlign = 'center';
</script>

Example

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Specify the font size and font name
ctx.font = "15px verdana";
//The word "Hello" will begin at (100,20)
ctx.textAlign = "start";
ctx.strokeText("Hello Start", 100, 20);
//The word "Hello" will end at (100,20)
ctx.textAlign = "end";
ctx.strokeText("Hello End", 100, 40);
//The word "Hello" will begin at (100,20)
ctx.textAlign = "left";
ctx.strokeText("Hello Left", 100, 60);
//The word "Hello" will center at (100,20)
ctx.textAlign = "center";
ctx.strokeText("Hello Center", 100, 80);
//The word "hello" will begin at (100,20)
ctx.textAlign = "right";
ctx.strokeText("Hello Right", 100, 100);
// Display the text at the specified location. In this case (5,20)
ctx.strokeText("Hello", 5, 20);
}
}
</script>
<title>Text Alignment </title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas>
<br>
</body>
</html>

Output