Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

CanvasTextMetrics object

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

HTML Canvas 2D Context, Section 1Internet Explorer 9

Members

The CanvasTextMetrics object has these types of members:

Properties

The CanvasTextMetrics object has these properties.

PropertyDescription

width

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

 

Standards information

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.


<!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>


See also

measureText
width

 

 

Show:
© 2014 Microsoft