This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

measureText

Summary

Returns a TextMetrics object that contains the width of the specified text.

Method of apis/canvas/TextMetricsapis/canvas/TextMetrics

Syntax

var object = TextMetrics.measureText(text);

Parameters

text

Data-type
String

The text to measure.

Return Value

Returns an object of type DOM NodeDOM Node

ICanvasTextMetrics: The width of the text, in CSS pixels.

Examples

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
ctxt.font = "24px Arial";
var txt = "Hello world!"
ctxt.fillText(txt, 10, 75);
var mets = ctxt.measureText(txt);
alert("measureText: " + mets);
//Returns a TextMetrics object
</script>

Usage

 Use measureText on the canvas context. An example can be found on the main object page TextMetrics

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions