擦除互动涂鸦把背景也擦没了，怎样核对 destination-out 合成范围

destination-out 会按源覆盖比例消去当前画布已有像素的透明度，它不知道哪些像素在业务上叫背景。需要保留底图时，把底图与可擦涂层分开，或根据数据模型重绘，不能期待橡皮擦自动识别图层语义。

先证实被擦掉的是什么

附件用单画布绘制绿色底色，再在中心4×4区域以destination-out擦除，读回像素为透明。另一组将绿色放在独立背景画布，红色放在前景画布，只擦前景。前景中心仍透明，但背景画布的绿色保持完整。这能证明分层保留来自资源隔离，而不是destination-out有特殊的背景保护开关。

透明不是涂成白色

擦除后看到白色可能只是页面底色透出，不能把截图上的白色当作位图RGBA已经是白。脚本直接getImageData检查alpha为0；若导出透明PNG，底色是否包含在导出里要按实际导出方案确认。CSS背景图或另一个DOM层不会自动进入当前canvas的像素，直接toDataURL可能只包含前景，交付时要说明合成方式。

绘图状态要在擦除后恢复

globalCompositeOperation是持续状态，做完橡皮擦若不恢复source-over，后续笔迹仍可能继续删除。实际工具切换可以save后设destination-out，完成后restore，或者在每个绘制入口明确设定合成模式。附件只做一次矩形擦除，不测触摸笔压力、边缘软度或多点笔迹；这些参数要在目标输入设备上另做轨迹验证。

分层之后还要规划撤销与导出

把背景和前景分开有助保留底图，但撤销操作仍需保存笔画数据或快照，不能通过“反向擦除”自动恢复原像素。需要导出最终效果时，可用第三个合成画布按顺序绘制背景与前景，再检查透明和颜色。这个实验只检查Canvas2D像素合成，不生成艺术作品，也不以10×10小例子推断大屏绘图的帧率或内存上限。

导出时先画底层再画前景

若要生成含底图的最终PNG，可新建合成画布，先drawImage背景，再drawImage前景，最后导出；仅导出前景会保留被擦区域的透明。合成前还需核对来源是否满足origin-clean，不能因图层分开就忽略跨源限制。背景保持绿色的像素断言只证明未被本次橡皮擦修改，不代表后续导出已经含背景，项目应再读回最终文件验证。

下载并复现

下载原创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可见对应执行记录。软件后端的像素结果不代表实体显卡性能、驱动稳定性或跨浏览器一致性。

继续核查与一级出处

基础背景见互动引擎怎么选？雷达/体感/触摸触发方式对比与选型清单。多层合成导出前，还需检查图片来源是否允许读取像素，可继续用跨域图片显示正常却不能导出 Canvas，怎样复现 origin-clean 限制取证；相关工程入口在专题与产品对接说明。

• globalCompositeOperation合成及destination-out：2026-10-24已联网读取一级来源；WHATWG HTML Living Standard，读取页标记2026-10-22更新。