テキストの大きさを取得したい

Question

テキストの大きさを取得したいです。

以下のコードでテキストの大きさを取得しました。

const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
text.textContent = "永"
text.setAttribute("font-family", "'リュウミン R-KL'")
text.setAttribute("font-size", "16")
text.getBBox()

しかし、得られた大きさ（画像左）は求めている大きさ（画像右）より縦長でした。

求めているような大きさを取得するにはどうすればいいでしょうか？

Answer 1

フォントによってボックスの大きさが違うので完璧なサイズを取得するというのは難しいような気がします。
仮にやるならテキストをcanvasに入れて色情報から文字サイズを判別することでできるかもしれません。

Answer 2

フォントによってボックスの大きさが違うので完璧なサイズを取得するというのは難しいような気がします。
仮にやるならテキストをcanvasに入れて色情報から文字サイズを判別することでできるかもしれません。

keisukeh さんありがとうございます。
以下のコードで求めている大きさを取得できました。

const canvas = document.createElement("canvas")
const context = canvas.getContext("2d")
context.font = "16pt 'リュウミン R-KL'"
context.fillText("永", 0, canvas.height)
const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
let bottom, left, right, _top

for (
    let index = 0,
        length = imageData.data.length;
    index < length;
    index += 4
) {
    const a = imageData.data[index + 3]
    const x = index / 4 % canvas.width
    const y = Math.floor(index / 4 / canvas.width)

    if (a === 0) {
        continue
    }

    if (
        typeof bottom === "undefined"
        || bottom < y
    ) {
        bottom = y
    }

    if (
        typeof left === "undefined"
        || left > x
    ) {
        left = x
    }

    if (
        typeof right === "undefined"
        || right < x
    ) {
        right = x
    }

    if (
        typeof _top === "undefined"
        || _top > y
    ) {
        _top = y
    }
}

{
    height: bottom - _top,
    width: right - left,
}