Javascript 无法擦除画布上绘制的线条

在互联网的帮助下，我现在可以通过在画布上拖动鼠标在画布上画圆圈和箭头线。现在的问题是我无法擦除我画的东西。我需要一个橡皮擦工具来擦去一小部分的画

我画的是两幅油画。我将在第一个画布（临时画布）上绘制，并将其复制到第二个画布（主画布）。这就是我在画布上绘制的每个新对象的情况

临时画布与主画布重叠。因此，我使用临时画布跟踪鼠标事件。然后我在主画布上使用

.clearRect（）

请告诉我我在这里犯的错误。提前谢谢

---

这是我的代码（JS、CSS、HTML）：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
变量颜色='红色'；
var工具=1；
var select=document.forms[0]。疾病；
select.onchange=function（）{
var disease=select.options[select.selectedIndex].text；
如果（疾病=渗出物）颜色=红色；
其他颜色='绿色'；
context.strokeStyle=颜色；
};
var select2=document.forms[0]。工具；
选择2.onchange=function（）{
tool=select2.options[select2.selectedIndex]。值；
context.lineWidth=工具；
};
功能图（模式）{
var tempcontext=tempcanvas.getContext（'2d'），
w=画布宽度，
h=画布高度，
x1，
y1，
isDown=假；
tempcanvas.onmousedown=函数（e）{
var pos=获取位置（e，画布）；
x1=位置x；
y1=位置y；
isDown=真；
};
tempcanvas.onmouseup=函数（）{
isDown=假；
drawImage（tempcanvas，0,0）；
clearRect（0，0，w，h）；
};
tempcanvas.onmousemove=函数（e）{
如果（！isDown）返回；
var pos=获取位置（e，画布）；
x2=位置x；
y2=位置y；
clearRect（0，0，w，h）；
如果（模式==“圆”）抽屉式椭圆（x1，y1，x2，y2）；
如果（模式==“线”）绘制箭头（x1、y1、x2、y2）；
};
功能抽屉（x1，y1，x2，y2）{
变量半径x=（x2-x1）*0.5，
半径y=（y2-y1）*0.5，
中心x=x1+半径x，
中心Y=y1+半径Y，
阶跃=0.01，
a=步骤，
pi2=Math.PI*2-步；
tempcontext.beginPath（）；
tempcontext.moveTo（centerX+radiusX*Math.cos（0），
centerY+radiusY*Math.sin（0））；
对于（；a最后，当互联网对我毫无帮助时，我自己找到了答案

function erase(){
    var mousedown = false;
    tempcanvas.onmousedown = function(e) {
        mousedown = true; 
    };
    tempcanvas.onmouseup = function(e) {
        mousedown = false;
    };
    tempcanvas.onmousemove = function(e) {
        if (!mousedown) return;     
        var pos = getPosition(e, canvas);
        context.clearRect(pos.x,pos.y,10,10);   
    };
}

关于我的编辑：我将你的代码分为单独的JS、CSS和HTML。这主要是为了代码片段，但我强烈建议你在自己的网站上遵循这一做法……（但即使你不这样做，最好将任何
元素放在
中，而不是
中）