javascript - Re-fill area of erased area for canvas -

i trying fill color in image using below code snippet filling color on image of canvas . filling color in canvas. trying erase filled color on touch of user using code snippet erasing color on image of canvas . erasing color & setting transparent area on touched position. want refill area on user touch colors not allowing me color on because of transparent pixels. there way refill pixels color or there other way erase color image of canvas ? reply appreciated.

code snippet filling color on image of canvas

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

code snippet erasing color on image of canvas

(function() {     // creates new canvas element , appends child     // parent element, , returns reference     // 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 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');  })(); 

warning untested code!

// create clipping region using erasing rect's x,y,width,height context.save(); context.beginpath(); context.rect(erasingrectx,erasingrecty,erasingrectwidth,erasingrectheight); context.clip();  // redraw original image. // image redrawn erasing rects boundary context.drawimage(yourimage,0,0);  // compositing: new pixels draw overlapping existing pixels context.globalcompositeoperation='source-in';  // fill new color // existing (clipped redrawn image) pixels colored context.fillstyle='red'; context.fillrect(0,0,canvas.width,canvas.height);  // undo clipping region context.restore();