How to make a canvas eraser for an Edit page?

258 Views Asked by At

I have made an edit form but this edit form also includes a drawing on a canvas. Everything is working okay except for the eraser I made for the canvas. The eraser works perfectly if you're making a drawing on a blank canvas but since this is for an edit page which means it already has a drawing on it. My main issue right now is that whenever I use the eraser, the previous drawing gets removed from the canvas leaving only the new marks you made. Can anyone help me with this one?

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()
    };

  }
0

There are 0 best solutions below