Canvas measureText() Method
Example
Check the width of the text, before writing it on the canvas:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
let txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);
Try it Yourself »
See Also:
The font Property (Set text font and size)
The fillStyle Property (Set text color/gradient)
The textAlign Property (Set text alignment)
The textBaseline Property (Set text baseline)
The fillText() Method (Draw the text)
The strokeText() Method (Draw the text)
Description
The measureText() method returns an object that contains the width of the specified text, in pixels.
Tip: Use this method if you need to know the width of a text, before writing it on the canvas.
| JavaScript syntax: | context.measureText(text).width; |
|---|
Parameter Values
| Param | Description | Play it |
|---|---|---|
| text | The text to be measured | Play it » |
Browser Support
The <canvas> element is an HTML5 standard (2014).
measureText() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
