How to find the height of a text in HTML canvas using JavaScript ? Last Updated : 12 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will find the height of the text canvas using JavaScript. We have two approaches to find the height of a text in HTML canvas using JavaScript which are described below: Approach 1: In the following example, the height attribute of the HTML canvas is used. First set the font in pt to set the height. context.font = '26pt Calibri'; Then the current text is aligned in the center by using values 'middle' and color 'yellow'. context.textAlign = 'middle'; context.fillStyle = 'yellow'; Then, check the width of the text using the measureText() method before writing to the canvas. Finally, the text is written on the canvas using the fillText() method. Example: This example shows the use of the above-explained approach. HTML <body style="margin: 0px;padding: 0px;"> <canvas id="myCanvas" width="550" height="200"> </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 3; var y = canvas.height / 2 - 15; var text = 'HI '; // Set the font to set the height context.font = '26pt Calibri'; context.textAlign = 'middle'; context.fillStyle = 'yellow'; context.fillText(text, x, y); context.font = '20pt Calibri'; // Check the width of the text var metrics = context.measureText(text); var width = metrics.width; // Text is aligned in the left context.textAlign = 'left'; context.fillStyle = '#010'; context.fillText('(' + width + 'px wide)', x, y + 40); </script> </body> Output: Approach 2: First get the 2d drawing context of the canvas by using the getContext() method. Set the font and the text string. Then write the text with x and y co-ordinates using fillText() method as given below. Example: This example shows the use of the above-explained approach. HTML <canvas id="Canvas" width="300" ] height="150" style="border:1px solid #010;"> Your browser isn't supporting HTML5 canvas tag. </canvas> <script> var c = document.getElementById("Canvas"); var x = c.getContext("2d"); x.font = "30px Arial"; var txt = "Computer Science" x.fillText("width:" + x.measureText(txt).width, 10, 50); x.fillText(txt, 10, 100); </script> Output: Comment More infoAdvertise with us Next Article How to get the Width and Height of an Image using JavaScript? M msd_vk Follow Improve Article Tags : JavaScript Technical Scripter 2020 JavaScript-Questions Similar Reads How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to Set the height and width of the Canvas in HTML5? The canvas element is a part of HTML5 which allows us for dynamic, scriptable rendering of 2D shapes and bitmap images, facilitating the creation of games, graphs, animations, and compositions. To set the height and width of the canvas in HTML5, we can utilize the height and width attributes within 2 min read How to get the height of scroll bar using JavaScript ? To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont 3 min read How to find the position of HTML elements in JavaScript ? In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is 3 min read How to get the div height using JavaScript ? In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. Method 1: Using the offsetHeight property: The offsetHeight property of an element is a rea 3 min read How to detect HTML <canvas> is not Supported by JavaScript? To detect if the HTML5 <canvas> element is supported by JavaScript, the existence of the getContext method is checked. This method is essential for rendering graphics on the canvas.Approach: Using getContext() methodThe getContext() method retrieves the drawing context of a canvas element and 2 min read Like