Canvas 改完 width 后颜色和变换都丢了，怎样验证上下文重置

即使把 canvas.width 赋成原来的值，也会重置位图和2D上下文状态。resize 之后必须重新建立颜色、变换、合成等绘图条件，并重画内容，不能期待旧像素或 save 栈继续保留。

用同值赋值排除尺寸换算干扰

夹具先设置红色填充和带缩放、平移的矩阵，在20×20画布上画出红块；随后执行width=width，尺寸数值没有变化。脚本仍应读到透明像素、默认黑色填充和单位矩阵。这个反例能指出问题来自属性赋值的重置语义，而不是因为新的尺寸把旧图缩小或裁掉。

把绘图初始化组织成可重入步骤

实际页面可将逻辑拆成计算尺寸、赋位图尺寸、重设状态、绘制内容四步。只有尺寸确实需要变化时才赋width或height，避免每帧用赋值清屏时顺便丢掉所有状态。若有离屏缓存或用户涂鸦，重建时还要有独立数据模型或备份位图，不能把屏上像素作为唯一资料来源。

save restore不能跨重置救回来

状态栈也随上下文重置，不应先save再改width，最后restore指望恢复旧变换。程序在重置后显式设红并重画，验证恢复来自自己的初始化代码。若想只清除本轮内容，可以按需求使用clearRect并考虑当前变换或合成状态；这与把整个上下文恢复默认是不同操作。

重绘正确仍要检查缩放链

高DPR画布通常在resize后重新设置逻辑尺度；如果只补颜色没补矩阵，内容大小仍会错。相反，重复叠加scale会让每次调整越画越大。附件只测试Canvas2D状态与像素，不声称WebGL的资源也按同一规则重建；WebGL有独立viewport和上下文丢失机制，项目应分别核验，而不是把所有黑屏都归到一个resize处理函数。

检查是否被框架反复赋同值

模板重新渲染、组件更新或尺寸观察回调即使计算结果未变，也可能再次写width属性。可以先比较当前位图尺寸与目标值，只有不同才赋值，随后统一初始化和重画。不要为了躲开重置只改CSS尺寸，因为这会引入另一个采样问题。附件特意用同值赋值证明这一点，实际项目应查是哪段代码拥有画布尺寸，避免两个模块轮流设置。

下载并复现

下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明，放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py；程序使用两个随机本地端口，自动关闭浏览器与服务，不请求外网或业务接口。

本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。Canvas2D或WebGL1页面API与像素读取；非指针输入、非实体GPU性能测量。断言已通过；完整事件和数值保留在执行记录，不能把它改名后当目标展项测量。

Canvas题限定2D上下文，WebGL题限定WebGL1；启动使用ANGLE SwiftShader软件后端参数，实际renderer可见对应执行记录。软件后端的像素结果不代表实体显卡性能、驱动稳定性或跨浏览器一致性。

继续核查与一级出处

基础背景见把图片改成300DPI为何仍不清楚，怎样核对像素与物理尺寸。重新初始化时应同时恢复CSS尺寸与DPR的尺度关系，可继续用Canvas 在高分屏上发虚，怎样核对 CSS 尺寸与绘图缓冲尺寸取证；相关工程入口在专题与产品对接说明。

• 设置canvas宽高内容属性会重置渲染上下文与位图：2026-10-24已联网读取一级来源；WHATWG HTML Living Standard，读取页标记2026-10-22更新。