Windows apps
Collapse the table of content
Expand the table of content
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



The CanvasTextMetrics object has these types of members:


The CanvasTextMetrics object has these properties.



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


Standards information


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.


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>
    <title>TextMetrics example</title>
  <h1>TextMetrics example</h1>
  <canvas id="MyCanvas" width="600" height="500"> </canvas>
      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);

See also




© 2017 Microsoft