HTML5 Canvas 橡皮擦工具，无需过度绘制图像加载到画布

如何解决HTML5 Canvas 橡皮擦工具，无需过度绘制图像加载到画布

我尝试制作一个简单的图像编辑器，用于在特定人的账单中加载图像。我想画一个线条加载的图像（我想使用钢笔工具剪切一些账单索赔项目，我给了选项橡皮擦以进行编辑）。我使用钢笔和橡皮擦工具创建画布加载图像。但是当橡皮擦绘制线图像内容也删除时我遇到了一些问题。我该如何避免这个问题？

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
    body{ background-color: ivory; }

    canvas{border:1px solid red;}

</style>
</head>
<body>

<img id="scream" width="220" height="277" src="download.png" alt="The Scream">

<canvas id="canvas" width=300 height=500></canvas></br>
<button id="pen">Pen</button>
<button id="eraser">Eraser</button>

</body>
</html>
<script type="text/javascript">

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,300,500);
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=5;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;


function handleMouseDown(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  lastX=mouseX;
  lastY=mouseY;
  isMouseDown=true;
}

function handleMouseUp(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isMouseDown=false;
}

function handleMouSEOut(e){
    
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouSEOut stuff here
  isMouseDown=false;
}

function handleMouseMove(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousemove stuff here
  if(isMouseDown){
    ctx.beginPath();
    if(mode=="pen"){
      ctx.globalCompositeOperation="source-over";
      ctx.moveto(lastX,lastY);
      ctx.lineto(mouseX,mouseY);
      ctx.stroke();     
    }else{
      ctx.globalCompositeOperation="destination-out";
      ctx.arc(lastX,lastY,8,Math.PI*2,false);
      ctx.fill();
    }
    lastX=mouseX;
    lastY=mouseY;
  }
}

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouSEOut(function(e){handleMouSEOut(e);});

var mode="pen";
$("#pen").click(function(){ mode="pen"; });
$("#eraser").click(function(){ mode="eraser"; });
</script>