canvas的撤销上一个动作

绘制

 var imgData; //记录 
function canvas_copy(){
       var context = 
       document.getElementById("pic").getContext('2d');
        var width = context.canvas.width;
          var height = context.canvas.height;
        imgData = context.getImageData(0, 0, width, height);  //绘制前记录当前的canvas的x/y坐标，宽高
       //以下是绘制的新内容
    ontext.fillStyle="#FF0000";
    context.fillRect(0,0,150,75);
          
          
      }

撤回

  function canvas_paste(){
         var context = document.getElementById("pic").getContext('2d');  //获取同一个canvas
    //绘制上一个
         context.putImageData(imgData,0,0);
      
     }

 连续撤回：改进如下

var imgDataArr=[];
var x=0
    y=0


      function canvas_copy(){
          var context = document.getElementById("pic").getContext('2d');
        var width = context.canvas.width;
          var height = context.canvas.height;
      let imgData = context.getImageData(0, 0, width, height);
       imgDataArr.push(imgData);
          context.fillStyle="#FF0000";
            context.fillRect(x,y,15,15);
          x+=20
          y+=20
      }
  
     function canvas_paste(){
         var context = document.getElementById("pic").getContext('2d');
      
         if(imgDataArr.length){
           context.putImageData(imgDataArr[imgDataArr.length-1],0,0);
        imgDataArr.pop()
         }
     }