Canvas 缩放后 putImageData 仍贴在原点，怎样对照 drawImage 的变换

putImageData 按位图像素位置写入，不受当前变换矩阵影响；drawImage 参与普通绘图变换。需要缩放或平移原始像素块时，可先写到离屏画布再 drawImage，不能只在 putImageData 前调用 scale。

给同一源设置两条绘制路径

附件先创建2×2红色源画布，读取ImageData。两块目标画布都设置两倍缩放并平移到6、6：第一块调用putImageData，第二块调用drawImage。前者红像素出现在0、0，后者出现在6、6，脚本读取两个位置验证差异。源像素完全相同，因而结果不会被解释成不同素材的导入尺寸。

像素写入与图像绘制各有用途

putImageData适合把计算出的像素数组按明确缓冲坐标写回；drawImage适合按上下文状态绘制已有图像来源。若算法输出的小块需要按屏幕比例放大，应先确定像素块的实际尺寸，再选择绘图接口。不要在不知道参考系时重复乘DPR，导致原始数组尺寸、目标位图和CSS显示之间又多出一层缩放。

读回坐标同样是位图坐标

getImageData读取的是画布像素区域，不能因为context存在变换就用逻辑位置直接当采样点。附件有意选择0、0和6、6这两个整数位图位置，避免抗锯齿边缘干扰断言。实际处理半透明或色彩空间数据时还要确认通道格式与舍入，本例仅使用不透明红色，不把结果推广为所有颜色往返都逐字节保持不变。

不要用无效变换补定位问题

看到像素块始终贴在左上角时，先确认接口是否就是putImageData，而不是继续增加translate、rotate或CSS偏移。CSS移动整个canvas会改变页面位置，却不会改变像素数组在位图内的位置。这个实验限定Canvas2D，不涉及WebGL纹理上传、glTF矩阵或SVG坐标；不同层的变换应分别记录，不混用一个“坐标不对”的结论。

原始像素数组的行列顺序要保留

ImageData按位图行列组织，算法写入时需用正确宽度计算通道索引。把逻辑宽当位图宽会让行尾错位，即使putImageData本身位置正确也会花屏。附件使用浏览器getImageData产生数组，排除了手工填充索引错误；真实图像算法应另有小矩阵断言。不要用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为何仍不清楚，怎样核对像素与物理尺寸。原始像素位置与高DPR逻辑尺寸应分开换算，可继续用Canvas 在高分屏上发虚，怎样核对 CSS 尺寸与绘图缓冲尺寸取证；相关工程入口在专题与产品对接说明。

• putImageData不受当前变换影响；drawImage走绘图模型：2026-10-24已联网读取一级来源；WHATWG HTML Living Standard，读取页标记2026-10-22更新。