HTML Canvas - actualBoundingBoxLeft Property

The property actualBoundingBoxLeft of TextMetrics interface is a read-only method which returns a double value giving the distance parellel to the text baseline of CanvasRenderingContext2D interface context object to the left-side of the bounding rectangle box in which the text is rendered. The double value is given in CSS pixels.

The property actualBoundingBoxRight of TextMetrics interface is a read-only method which returns a double value giving the distance parellel to the text baseline of CanvasRenderingContext2D interface context object to the right-side of the bounding rectangle box in which the text is rendered. The double value is given in CSS pixels.

Example − (Returning values)

The following example demonstrates the HTML Canvas actualBoundingBoxLeft and actualBoundingBoxRight 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 left : " + word.actualBoundingBoxLeft + "\nBounding box right : " + word.actualBoundingBoxRight);
      }
   </script>
</body>
</html>

Output

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

HTML Canvas ActualBoundingBoxDescent Property

html_canvas_text.htm