Как сделать ластик для холста для страницы редактирования?

Question

Я сделал форму редактирования, но эта форма редактирования также включает в себя рисунок на холсте. Все работает хорошо, кроме ластика, который я сделал для холста. Ластик отлично работает, если вы создаете рисунок на чистом холсте, но так как он предназначен для страницы редактирования, то есть на ней уже есть рисунок. Моя главная проблема сейчас заключается в том, что всякий раз, когда я использую ластик, предыдущий рисунок удаляется с холста, оставляя только новые пометки, которые вы сделали. Может ли кто-нибудь помочь мне с этим?

var stage, wrapper, erase=0;

  function init(){

      var stage = new createjs.Stage("canvas");
      createjs.Ticker.addEventListener("tick", stage);
      createjs.Touch.enable(stage);    

      stage.addChild(new createjs.Text("", "40px Arial", "#000000").set({x:200,y:200}));

      // Set up the container. We use it to draw in, and also to get mouse events.
      var wrapper = new createjs.Container();
      wrapper.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,800,600));
      wrapper.cache(0,0,800,600); // Cache it.
      stage.addChild(wrapper);

      // Create the shape to draw into
      var drawing = new createjs.Shape();
      wrapper.addChild(drawing);

      var lastPoint = new createjs.Point();

      // retrieves image url for previous drawing
      var path = document.getElementById("hidden").value;
      var prevDraw = new createjs.Bitmap(path);
      prevDraw.image.onload = function(){
          prevDraw.x = 0;
          prevDraw.y = 0;
          wrapper.addChild(prevDraw);
          wrapper.updateCache();
          stage.update();
      }


      wrapper.addEventListener("mousedown", function(event){

          // Store the position. We have to do this because we clear the graphics later.
          lastPoint.x = event.stageX;
          lastPoint.y = event.stageY;

          if(document.getElementById('toggle').checked){
              erase = 1;
          }else{
              erase = 0;
          }

          wrapper.addEventListener("pressmove", function(event){
              // Draw a round line from the last position to the current one.
              drawing.graphics.ss(5, "round").s("#ff0000");
              drawing.graphics.mt(lastPoint.x, lastPoint.y);        
              drawing.graphics.lt(event.stageX, event.stageY);

              // Update the last position for next move.
              lastPoint.x = event.stageX;
              lastPoint.y = event.stageY;

              // Draw onto the canvas, and then update the container cache.
              wrapper.updateCache(erase==1?"destination-out":"source-over");
              drawing.graphics.clear();

          });


          // Listen for mousemove
      });


    function clear(){
      stage.removeAllChildren();
      stage.update();
      init2();

    }

    document.getElementById("clear").onclick = function(){
      clear()
    };

    function reset(){
      stage.removeAllChildren();
      stage.update();
      init();

    }

    document.getElementById("reset").onclick = function(){
      reset()
    };

  }