Canvas API không cung cấp trực tiếp phương thức đo chiều cao text. Cách phổ biến là đặt font size đơn vị pt (point) và parse giá trị số từ chuỗi font.
Cách làm
- Đặt font với đơn vị
pt:
context.font = "15pt Calibri";
- Trích xuất kích thước font (chiều cao xấp xỉ):
var height = parseInt(context.font.match(/\d+/), 10);
Giải thích
- Regex
/\d+/tìm số đầu tiên trong chuỗi font (ví dụ "15pt Calibri" → "15"). parseInt(..., 10)chuyển thành số nguyên.- Giá trị này tương ứng với font size, xấp xỉ bằng chiều cao dòng (line height) cho văn bản đơn dòng.
Lưu ý
- Chiều cao thực tế của glyph có thể khác (ascent + descent).
- Để đo chính xác bounding box, dùng
measureText()cho width, và ước lượng height = font size * 1.2 (hoặc dùng font metrics phức tạp hơn). - Cách này chỉ hoạt động nếu font được đặt theo format "
pt ".