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

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

我正在画的是我创作了两幅油画。我将在第一个画布（临时画布）上绘制，并将其复制到第二个画布（主画布

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

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

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

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var color = 'red';
var tool = 1;
var select = document.forms[0].disease;
select.onchange = function() {
  var disease = select.options[select.selectedIndex].text;
  if (disease == "Exudates") color = 'red';
  else color = 'green';
  context.strokeStyle = color;
};
var select2 = document.forms[0].tool;
select2.onchange = function() {
  tool = select2.options[select2.selectedIndex].value;
  context.lineWidth = tool;
};
function draw(mode) {
  var tempcontext = tempcanvas.getContext('2d'),
      w = canvas.width,
      h = canvas.height,
      x1,
      y1,
      isDown = false;
  tempcanvas.onmousedown = function(e) {
    var pos = getPosition(e, canvas);
    x1 = pos.x;
    y1 = pos.y;
    isDown = true;
  };
  tempcanvas.onmouseup = function() {
    isDown = false;
    context.drawImage(tempcanvas, 0, 0);
    tempcontext.clearRect(0, 0, w, h);
  };
  tempcanvas.onmousemove = function(e) {
    if (!isDown) return;
    var pos = getPosition(e, canvas);
    x2 = pos.x;
    y2 = pos.y;
    tempcontext.clearRect(0, 0, w, h);
    if (mode == "Circles") drawEllipse(x1, y1, x2, y2);
    if (mode == "Lines") drawArrow(x1, y1, x2, y2);
  };
  function drawEllipse(x1, y1, x2, y2) {
    var radiusX = (x2 - x1) * 0.5,
        radiusY = (y2 - y1) * 0.5,
        centerX = x1 + radiusX,
        centerY = y1 + radiusY,
        step = 0.01,
        a = step,
        pi2 = Math.PI * 2 - step;
    tempcontext.beginPath();
    tempcontext.moveTo(centerX + radiusX * Math.cos(0), 
                       centerY + radiusY * Math.sin(0));
    for (; a<pi2; a+=step) {
      tempcontext.lineTo(centerX + radiusX * Math.cos(a), 
                         centerY + radiusY * Math.sin(a));
    }
    //tempcontext.fillStyle=color;
    tempcontext.font = "20px Georgia";
    if (color == "red") tempcontext.fillText("Exudate", x2, y2);
    else tempcontext.fillText("Red Lession", x2, y2);
    tempcontext.closePath();
    tempcontext.lineWidth = tool;
    tempcontext.strokeStyle = color;
    tempcontext.stroke();
  };
  function drawArrow(x1, y1, x2, y2) {
    var headLength = 10,
        step = 0.01,
        a = step,
        pi2 = Math.PI * 2 - step;
    tempcontext.beginPath();
    tempcontext.moveTo(x1, y1);
    for (; a<pi2; a+=step) {
      tempcontext.lineTo(x2, y2);
      var degreesInRadians225 = 225 * Math.PI / 180;
      var degreesInRadians135 = 135 * Math.PI / 180;
      var dx = x2 - x1;
      var dy = y2 - y1;
      var angle = Math.atan2(dy, dx);
      var x225 = x2 + headLength * Math.cos(angle + degreesInRadians225);
      var y225 = y2 + headLength * Math.sin(angle + degreesInRadians225);
      var x135 = x2 + headLength * Math.cos(angle + degreesInRadians135);
      var y135 = y2 + headLength * Math.sin(angle + degreesInRadians135);
      // draw partial arrowhead at 225 degrees
      tempcontext.moveTo(x2, y2);
      tempcontext.lineTo(x225, y225);
      // draw partial arrowhead at 135 degrees
      tempcontext.moveTo(x2, y2);
      tempcontext.lineTo(x135, y135);
    }
    tempcontext.closePath();
    tempcontext.lineWidth = tool;
    tempcontext.strokeStyle = color;
    tempcontext.stroke();
  };
}
function erase() {
  tempcanvas.onmousedown = function(e) {
    var pos = getPosition(e, canvas);
        mousedown = true;
        context.beginPath();
        context.moveTo(pos.x, pos.y);
  };
  tempcanvas.onmouseup = function(e) {
    mousedown = false;
  };
  tempcanvas.onmousemove = function(e) {
    if (!mousedown) return;
    context.clearRect(pos.x, pos.y, 10, 10);
  };
}
function getPosition(e, gCanvasElement) {
  var x;
  var y;
  x = e.pageX;
  y = e.pageY;
  x -= gCanvasElement.offsetLeft;
  y -= gCanvasElement.offsetTop;
  return {x:x, y:y};
}
function save() {
  var canvas2 = document.getElementById('canvas2');
  var context2 = canvas2.getContext('2d');
  var img = document.getElementById("result");
      context2.drawImage(img, 0, 0, 300, 300);
      context2.drawImage(canvas, 0, 0);
  var canvasData = canvas2.toDataURL();
  document.getElementById('canvasImg').src = canvasData;
};

#myCanvas {
  background: url("images/<s:property value="userImageFileName"/>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#myCanvas,
#tempcanvas {
  cursor: pointer;
  border: 1px solid black;
  position: absolute;
  left: 0;
  top: 0;
}
#myCanvas:active,
#tempcanvas:active {
  cursor: crosshair;
}

<html>
  <head>
    <title>Success: Upload User Image</title>
  </head>
  
  <body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>
    <canvas id="tempcanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <form>
      <select name='tool' onChange="split()">
        <option value='2'>Pen</option>
        <option value='5'>Sketch</option>
      </select>
      
      <select name='disease' onChange="split()">
        <option>Exudates</option>
        <option>Red Lessions</option>
      </select>
    </form>
    <input type="button" value="eraser" onClick="erase()" />
    <input type="button" value="circles" onclick="draw('Circles')" />
    <input type="button" value="lines" onclick="draw('Lines')" />
    <input type="submit" value="save" onClick="save()" />
  </body>
</html>