canvas 是HTML5的元素，使用JavaScript 在网页上绘制图像。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

而如果想实现画笔在画板涂画画笔在图片上涂画，橡皮擦可擦除涂画，就需要两个canvas画布配合。

原理就是两个一样大小的canvas画布重叠放置，并且都绘制这个图画，这样只在上面的canvas涂画、擦除，擦除时把下层canvas内容替换上层的canvas内容，达到模仿橡皮擦效果。

下面就是具体实现代码：

1、先准备画布和工具：

2、画布、工具样式，以便正常显示、使用：

3、重点是JS控制涂画、擦除：

原理就是通过获取鼠标移动轨迹（移动位置：x坐标，y坐标），在画布上创建这段轨迹的线条。

4、可以把画布保存成图片：

原理就是将canvas内容转成Base64格式，作为图片下载，当然也可以把Base64存储到数据库或其他地方，以后可加载它绘制到canvas画布上。

5、效果如图：

以上就是巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保持的实现。如有错误，请不吝指正。

另附：初始化画布，绘制图片代码