Metodo measureText() del canvas HTML

Definizione e uso

measureText() Il metodo restituisce un oggetto che contiene la larghezza del carattere specificato in pixel.

Suggerimento:Se hai bisogno di sapere la larghezza del testo prima di scrivere sul canvas, usa questo metodo.

Esempio

Controlla la larghezza del carattere prima di scrivere testo sul canvas:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("larghezza:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

Prova personalmente

Sintassi

context.measureText(text).width;

Valore del parametro

Parametro Descrizione
text Testo da misurare.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.