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
![baseline.jpg]()
Measuring Text in the HTML5 canvas
In order to get the text metrics of the canvas we use the measureText() method that measure 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
![measuring.jpg]()
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 centre. The centre 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
![textalign.jpg]()