W3cubDocs

/Web APIs

CanvasRenderingContext2D: measureText() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width, for example).

Syntax

measureText(text)

Parameters

text

The text string to measure.

Return value

A TextMetrics object.

Examples

Given this <canvas> element:

<canvas id="canvas"></canvas>

… you can get a TextMetrics object using the following code:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let text = ctx.measureText("Hello world");
console.log(text.width); // 56;

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
measureText 2 12 3.5 ≤12.1 4 18 4 ≤12.1 3.2 1.0 4.4 3.2

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText