Javascript 如何计算动态画布上文本对象的边界框

我试图计算html画布上文本对象的像素高度和宽度。我已经尝试了下面看到的一些代码，但是我得到了错误的结果。有没有更干净的计算方法？动态画布需要根据文本的长度和大小进行调整

px高度和宽度需要正确计算。从最左上方的像素到最右下方的像素。 画布需要调整大小以最小化计算时间并考虑文本量，包括\n。我试过了 canvas.setWidth400+text.getBoundingRectWidth； canvas.setHeight400+text.getBoundingRectHeight

但我不确定它是否有效

如何重写此代码，使画布大小保持动态，并根据可能发生变化的文本（例如，在文本区域中撰写文章的人）进行调整

如何正确计算文本的大小

如果有人重写此代码以符合我的上述规范，我可以提供奖金、礼品卡、免费比萨饼等。。。。我花了很多时间想弄明白这一点

研究： 看起来很有希望

这是基于JSBIN的

而不是

canvas.setWidth(400+text.getBoundingRectWidth());
canvas.setHeight(400+text.getBoundingRectHeight());

使用

---

textSize.height在我更改代码时未定义。TextMetrics.height不是属性，请参阅mdn：您可以使用ctx.getImageData计算某些文本的范围。在屏幕外画布上渲染所需的文本，获取所有像素，然后找到顶部、底部、左侧，通过检查空行和空列，所有alpha值都为零不是很快，但如果在开始时执行每个字符，只记录顶部和底部，则可以使用测量文本获取宽度，并查找字符以查找最大垂直范围。

canvas.setWidth(400+text.getBoundingRectWidth());
canvas.setHeight(400+text.getBoundingRectHeight());

var textSize = ctx.measureText(text);
canvas.setWidth(400+textSize.width);
canvas.setHeight(400+textSize.height);