CanvasRenderingContext2D变换为何需重置画布尺寸？固定尺寸代码失效问题

问题背景 #

我修改了一个纯JavaScript实现的Canvas平移缩放示例，将原代码中每次draw函数执行时重置画布尺寸的操作移除，改为固定300x300的画布尺寸，但修改后在Ubuntu系统的Chrome和Firefox浏览器中功能失效。需要明确两个核心问题：

1. 重置画布尺寸是否会重置CanvasRenderingContext2D？
2. 该操作的具体副作用是什么？

一、重置画布尺寸会完全重置CanvasRenderingContext2D #

是的，当修改<canvas>元素的width或height属性时，浏览器会完全重置对应的CanvasRenderingContext2D上下文，包括所有状态和已绘制内容。

二、重置画布尺寸的具体副作用 #

• 清空所有绘制内容：画布上已绘制的图形会被立即清除
• 重置变换矩阵：之前通过translate()、scale()、rotate()设置的累积变换会被清零，回到初始单位矩阵状态
• 重置所有样式属性：fillStyle、strokeStyle、font、lineWidth、globalAlpha等所有自定义样式设置会恢复为默认值
• 清除裁剪路径：任何通过clip()设置的裁剪区域会被移除
• 清空状态栈：使用save()/restore()保存的状态栈会被完全清空

三、代码失效的原因 #

原代码每次draw都重置画布尺寸，本质是利用这个操作自动重置上下文的变换矩阵，避免每次绘制时变换效果累积导致的坐标错乱。移除该操作后：
每次draw执行时，ctx.translate()、ctx.scale()、ctx.rotate()的变换会持续叠加，导致绘制的图形快速偏移出画布，视觉上表现为功能失效。

修复方案 #

不需要依赖重置画布尺寸来重置上下文，在每次绘制前手动重置变换矩阵即可：
在draw函数开头添加以下代码：

ctx.setTransform(1, 0, 0, 1, 0, 0);

该方法会直接将上下文的变换矩阵重置为单位矩阵，替代原代码中重置画布尺寸的作用，同时保留固定画布尺寸的设置。

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