为什么调用save()和restore()无法清除Canvas上绘制的线条？

你对save()、restore()的功能存在核心认知偏差，这两个接口不会保存画布上的已绘制像素内容，仅会保存绘图上下文的状态栈，包含的是strokeStyle、fillStyle、变换矩阵、裁剪路径、全局透明度、线条属性这一类绘图配置项，和已经画到画布上的图形没有任何关系。

你代码里的逻辑自然不会生效：白线是已经被绘制到画布像素层的内容，restore()只会把绘图上下文的配置还原到上一次save()时的状态，不会擦除已经存在的像素，自然会有残留。

如果需要实现绘制白线后清除的效果，常用方案有两个：

• 每次重绘前调用ctx.clearRect(0, 0, 画布宽度, 画布高度)清空整个画布，再重新绘制所有需要保留的元素
• 如果仅需要清除白线区域，可计算白线覆盖的坐标范围，调用ctx.clearRect()指定对应区域清空，或是用画布背景色重新绘制覆盖白线区域

另外你代码开头的ctx.restore()如果没有匹配之前的save()调用，属于无效操作，不会产生任何效果。

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