CanvasTextMetrics object

Provides an object that contains the width attribute that the measureText method sets.

Members

The CanvasTextMetrics object has these types of members:

Properties

Properties

The CanvasTextMetrics object has these properties.

Property	Description
width	Gets the width, in CSS pixels, of a given box of text.

Standards information

HTML Canvas 2D Context, Section 1

Remarks

To see this object in an example, see measureText.

Note If you are developing on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Windows Internet Explorer to use the latest standards. For more information about document compatibility, see Defining Document Compatibility.

Examples

This example draws some text and then using measureText and the width attribute, gets the size of the string and draws a rectangle around it. Note that the height is an approximation because you cannot currently get the exact height of the text. See the example in action.

HTML


<!DOCTYPE html>
<html>
<head>
    <title>TextMetrics example</title>
</head>
<body>
  <h1>TextMetrics example</h1>
  <canvas id="MyCanvas" width="600" height="500"> </canvas>
    <script>
      var canvas = document.getElementById("MyCanvas");
      var message = "Hello, check this out";
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        // Show the demo.
        ctx.strokeStyle = "blue";
        ctx.font = "italic 100 24px/2 Unknown Font, sans-serif";
        ctx.textAlign = "start";
        ctx.strokeText(message, 100, 100);

        //  Draw a box around the message
        var textMetrics = ctx.measureText(message);
        ctx.strokeRect(90, 75, textMetrics.width + 20, 35);
      }
  </script>
</body>
</html>