调整Canvas宽高后ctx.textBaseline重置是否为预期行为？

没错，这确实是Canvas规范定义的预期行为！

当你修改Canvas元素的width或height属性时，整个画布会被完全重置：不仅绘制的内容会被清空，所有Canvas Context的配置项（比如textBaseline、fillStyle、lineWidth这类）都会恢复到各自的默认值。这是因为调整画布尺寸相当于重新创建了一个全新的绘图缓冲区，原来的Context状态自然就被清除了，这个行为在主流浏览器（包括Chrome、Firefox）里都是一致的。

如果需要在调整尺寸后保留之前的Context设置，你可以试试这两种方案：

• 提前保存+恢复配置：在修改画布尺寸前，把需要保留的Context配置项存下来，调整完成后再逐一恢复。
• 封装配置函数：把Context的初始化/配置逻辑写成独立函数，每次尺寸变化后调用这个函数重新设置一遍。

举个简单的代码示例：

// 保存当前Context的关键配置
const saveCtxSettings = (ctx) => {
  return {
    textBaseline: ctx.textBaseline,
    fillStyle: ctx.fillStyle,
    lineWidth: ctx.lineWidth
    // 按需添加其他需要保留的配置项
  };
};

// 恢复Context配置
const restoreCtxSettings = (ctx, savedSettings) => {
  ctx.textBaseline = savedSettings.textBaseline;
  ctx.fillStyle = savedSettings.fillStyle;
  ctx.lineWidth = savedSettings.lineWidth;
  // 对应恢复其他配置项
};

// 实际使用场景
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 初始配置
ctx.textBaseline = 'top';
ctx.fillStyle = '#ff0000';

// 调整画布尺寸时的操作
const resizeCanvas = (newWidth, newHeight) => {
  const savedSettings = saveCtxSettings(ctx);
  canvas.width = newWidth;
  canvas.height = newHeight;
  restoreCtxSettings(ctx, savedSettings);
};

// 调用尺寸调整
resizeCanvas(800, 600);

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