Canvas首次绘制文本时尺寸无法正常显示的原因求解

• 测量与设置字体的顺序错误：Canvas 2D上下文默认字体为10px sans-serif，首次执行代码时，你先调用ctx.measureText()计算文本宽度，此时还未设置30px的目标字体，测量得到的宽度是基于10px小字体计算的，远小于实际渲染需要的宽度，导致首次设置的canvas宽度不足，文本展示不全。
• 上下文状态复用导致第二次正常：第一次执行代码的末尾已经给ctx设置了normal 30px Verdana的字体属性，第二次触发draw()函数时，测量文本会复用已经修改后的字体配置，得到的宽度符合实际渲染需求，因此第二次绘制正常。
• 额外注意：修改canvas.width/canvas.height属性会清空画布并重置上下文所有状态，包括字体、填充色、变换矩阵等都会恢复为默认值，因此设置完canvas尺寸后必须重新配置绘制属性。

正确的逻辑应该是先配置测量用的字体、计算所需尺寸、设置canvas尺寸、再重新配置绘制属性最后渲染，示例代码如下：

const message = input.value;
let ctx = canvas.getContext('2d');
// 1. 先设置和绘制时一致的字体，用于正确测量宽度
ctx.font = "normal 30px Verdana";
// 2. 测量文本宽度
let metrics = ctx.measureText(message);
let textWidth = metrics.width * 2;
// 3. 设置canvas尺寸（这一步会重置ctx状态，后续需要重新配置属性）
canvas.width = textWidth;
canvas.height = 200;
// 4. 重新设置绘制所需的所有属性
ctx.font = "normal 30px Verdana";
ctx.fillStyle = "#000000";
// 5. 绘制文本，y坐标适当留边距避免底部被裁切
ctx.fillText(message, 30, 180);

<input id="input" value="init message" />
<canvas id="canvas"></canvas>

内容的提问来源于stack exchange，提问作者AMORE