Metode HTML canvas measureText()

Definisi dan Penggunaan

measureText() Metode ini mengembalikan objek yang berisi lebar fonta yang ditentukan dalam satuan piksel.

Pemberitahuan:Jika Anda perlu mengetahui lebar teks sebelum menampilkan teks di atas kanvas, gunakan metode ini.

Contoh

Sebelum menampilkan teks di atas kanvas, periksa lebar fonta:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

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

Coba Sendiri

Syarat

context.measureText(text).width;

Nilai Parameter

Parameter Deskripsi
text Teks yang akan diukur.

Dukungan Browser

Angka di tabel menandai versi browser pertama yang mendukung atribut ini.

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

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.