Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find height of text in HTML canvas using JavaScript ?
Overview
A canvas is a HTML element that provides us to display any type of custom text or graphics on the web page. A canvas makes a graphics editable through which we can make our own custom text or design.
A canvas element can be added to the HTML using <canvas> tag or using JavaScript we can add it through the 'document' object 'createElement' method. As we have to find the height of the text that is written in the HTML canvas, we can use the ''textMetrics" objects measureText() property to calculate height of the text.
Syntax
The Syntax used to find the height of the text is shown below in which we have taken the reference of canvas getContext() property.
var fM = ctx.measureText("A");
var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;
measureText() − The measureText() in the above Syntax is termed as the property of the textMetrics object. In the measureText() a parameter is passed as the character which has the maximum height such as measureText("C").
actualBoundingBoxAscent − It is the method of the measureText() property which returns the height of the text above the baseline of the text in the vertical direction. By this method we can get the height of the characters which are above the baseline.
actualBoundingBoxDescent − It is the method of the measureText() property which returns the height of the text below the baseline of the text in the vertical downwards direction. By this method we can get the height of the characters which are below the baseline.
Algorithm
Step 1 − Create a HTML file on your text editor and add the HTML boilerplate to the file.
Step 2 − Now create a canvas using the HTML <canvas> tag with the id name equals to "textCanvas". Also add the height and width attribute to the canvas tag.
<canvas id="textCanvas" width="300" height="150"></canvas>
Step 3 − Now add the script tag to the body tag.
<script></script>
Step 4 − Now access the canvas tag and store it in a variable.
let canva = document.getElementById("textCanvas");
Step 5 − Use getContext() to make the text to the 2d canvas.
let ctx = canva.getContext("2d");
Step 6 − Now store the fontSize and fontFamily to a variable.
var f = "20px Arial"; ctx.font = f;
Step 7 − Now store any text to the variable.
var txt = "tutorialspoint.com";
Step 8 − Create a reference of the measureText() to a variable.
var fM = ctx.measureText("A");
Step 9 − Now use the actualBoundingBoxAscent and actualBoundingBoxDescent method and add their return value and store it in a variable.
var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;
Step 10 − Use the fillText() method to add the height and text to the canvas.
ctx.fillText("Text: " + txt, 5, 40)
ctx.fillText("Height: " + txtH, 5, 80)
Example
In this Example we will be creating a canvas using the HTML and will add a text to the canvas using JavaScript. Then we will be using the textCentrics properties to calculate the height of the text.
<html>
<head>
<title> find the height of text </title>
<style>
canvas {
border: 2px solid black;
}
</style>
</head>
<body>
<h3> Finding height of the text </h3>
<canvas id="textCanvas" width="300" height="150"></canvas>
<script>
let canva = document.getElementById("textCanvas");
let ctx = canva.getContext("2d");
var f = "20px Arial";
ctx.font = f;
var txt = "tutorialspoint.com";
var fM = ctx.measureText("A");
var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;
ctx.fillText("Text: " + txt, 5, 40)
ctx.fillText("Height: " + txtH, 5, 80)
</script>
</body>
</html>
The given below image shows the height of the entered text. In the below image a box which has a black border is the canvas which contains a text as "tutorialspoint.com" and with the height of "15". In this the height of the above baseline plus the height of the below base line character is calculated and is added to get the height of the total text.
Conclusion
This feature is helped in the DOM manipulation of the web page layout. This helps to create a dynamic transition effect and animation. As we had used the fillText() method in which we can pass the three parameters as the text which we had to add it in the canvas, second parameter is the x coordinate in horizontal direction of the canvas in which a numerical value is passed and the third parameter is the y coordinate which is the vertical direction and sets the numerical value.
626 Views
