Заполните область удаленной области для холста

Question

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

фрагмент коды для заполнения цвета на изображениях холста

var ctx = canvas.getContext('2d'), 
    img = new Image; 
img.onload = draw; 
img.crossOrigin = 'anonymous'; 
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png"; 

    function draw(color) { 
     ctx.drawImage(img, 0, 0); 
    } 
    canvas.onclick = function(e){ 
     var rect = canvas.getBoundingClientRect(); 
     var x = e.clientX-rect.left, 
      y = e.clientY-rect.top; 

     ctx.globalCompositeOperation = 'source-atop'; 
     ctx.fillStyle = 'blue'; 
     ctx.beginPath(); 
     ctx.arc(x-5,y-5,10,0,2*Math.PI); 
     ctx.fill(); 

     } 

фрагмента кода для стирания цвета на изображениях холста

(function() { 
    // Creates a new canvas element and appends it as a child 
    // to the parent element, and returns the reference to 
    // the newly created canvas element 


    function createCanvas(parent, width, height) { 
     var canvas = {}; 
     canvas.node = document.createElement('canvas'); 
     canvas.context = canvas.node.getContext('2d'); 
     canvas.node.width = width || 100; 
     canvas.node.height = height || 100; 
     parent.appendChild(canvas.node); 
     return canvas; 
    } 

    function init(container, width, height, fillColor) { 
     var canvas = createCanvas(container, width, height); 
     var ctx = canvas.context; 
     // define a custom fillCircle method 
     ctx.fillCircle = function(x, y, radius, fillColor) { 
      this.fillStyle = fillColor; 
      this.beginPath(); 
      this.moveTo(x, y); 
      this.arc(x, y, radius, 0, Math.PI * 2, false); 
      this.fill(); 
     }; 
     ctx.clearTo = function(fillColor) { 
      ctx.fillStyle = fillColor; 
      ctx.fillRect(0, 0, width, height); 
     }; 
     ctx.clearTo(fillColor || "#ddd"); 

     // bind mouse events 
     canvas.node.onmousemove = function(e) { 
      if (!canvas.isDrawing) { 
       return; 
      } 
      var x = e.pageX - this.offsetLeft; 
      var y = e.pageY - this.offsetTop; 
      var radius = 10; // or whatever 
      var fillColor = '#ff0000'; 
      ctx.globalCompositeOperation = 'destination-out'; 
      ctx.fillCircle(x, y, radius, fillColor); 
     }; 
     canvas.node.onmousedown = function(e) { 
      canvas.isDrawing = true; 
     }; 
     canvas.node.onmouseup = function(e) { 
      canvas.isDrawing = false; 
     }; 
    } 

    var container = document.getElementById('canvas'); 
    init(container, 531, 438, '#ddd'); 

})(); 

Answer 1

Предупреждения непроверенного кода!

// create a clipping region using your erasing rect's x,y,width,height 
context.save(); 
context.beginPath(); 
context.rect(erasingRectX,erasingRectY,erasingRectWidth,erasingRectHeight); 
context.clip(); 

// redraw the original image. 
// the image will be redrawn only into the erasing rects boundary 
context.drawImage(yourImage,0,0); 

// compositing: new pixels draw only where overlapping existing pixels 
context.globalCompositeOperation='source-in'; 

// fill with your new color 
// only the existing (clipped redrawn image) pixels will be colored 
context.fillStyle='red'; 
context.fillRect(0,0,canvas.width,canvas.height); 

// undo the clipping region 
context.restore();