HTML Canvas - fontBoundingBoxAscent Property

The HTML Canvas fontBoundingBoxAscen property of TextMetrics interface is a read-only method which returns a double value giving the distance from horizontal line to the text baseline of CanvasRenderingContext2D interface context object to the top of the highest bounding rectangle box of all the fonts used for text rendering. The double value is given in CSS pixels.

The HTML Canvas fontBoundingBoxDescent property TextMetrics interface is a read-only method which returns a double value giving the distance from horizontal line to the text baseline of CanvasRenderingContext2D interface context object to the bottom of the highest bounding rectangle box of all the fonts used for text rendering. The double value is given in CSS pixels.

Example

The following example demonstrates the HTML Canvas fontBoundingBoxAscent and fontBoundingBoxDescent properties. The code for the implementation is given below.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="text();">
   <canvas id="canvas" width="500" height="100" style="border: 1px solid black;"></canvas>
   <script>
      function text() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.font = '50px Verdana';
         context.fillText('TutorialsPoint', 50, 50);
         var word = context.measureText('TutorialsPoint');
         alert("font ascent : " + word.fontBoundingBoxAscent + "\nfont descent : " + word.fontBoundingBoxDescent);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas FontBoundingBoxAscent Property

html_canvas_text.htm