canvas循环调用putImageData来重绘源画布时，stroke()和fill()的绘制内容没有被清除，strokeRect()和fillRect()的绘制内容可以被清除

需求

在某个canvas业务中，循环点击不同区块，可以依次在相应区块绘制“对号”，当绘制下一个“对号”的时候，清除上一个“对号”

问题重现

代码描述：

初始化时将源canvas通过putImageData保存到变量中，通过canvas.onmousedown来不断触发putImageData来重绘画布，在每次onmousedown结束的时候调用stroke()和strokeRect()。

理想状态：

每次stroke()和strkoeRect()的内容都在下一次onmousedown刚开始的时候被清除

实际效果：

仅strkoeRect()的绘制内容被清除，stroke()的内容仍然被留在旧画布上。

问题解决

在每次stroke()之前的绘制步骤前（包括lineTo等绘制路径的API）。使用**context.beginPath()**进行清除旧路径

原因分析

lineTo()等绘制路径的API会创建路径，如果不使用beginPath()，则会在后续的路径绘制上叠加“之前的路径”，导致最后执行stroke()的时候，实际上时同时描边了“多个路径的集合”。

而strokeRect是不通过Path路径来而直接绘制在画布上的，跳过了路径的概念，所以不会产生这种效果