HTML Canvas - actualBoundingBoxDescent Property

The HTML Canvas actualBoundingBoxAscent property of TextMetrics interface is a read-only method which returns a double value giving the distance from horizontal line indicated by the text baseline of CanvasRenderingContext2D interface context object to the "top" of the bounding rectangle box in which the text is rendered. The double value is given in CSS pixels.

The HTML Canvas actualBoundingBoxDescent property of TextMetrics interface is a read-only method which returns a double value giving the distance from horizontal line indicated by the text baseline of CanvasRenderingContext2D interface context object to the "bottom" of the bounding rectangle box in which the text is rendered. The double value is given in CSS pixels.

Example 1 − (Returning values)

The following example demonstrates the HTML Canvas actualBoundingBoxAscent and actualBoundingBoxDescent 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("Bounding box ascent : " + word.actualBoundingBoxAscent + "\nBounding box descent : " + word.actualBoundingBoxDescent);
      }
   </script>
</body>
</html>

Output

The output window alert raised by the above code on the webpage as −

HTML Canvas ActualBoundingBoxDescent Property

html_canvas_text.htm