Re-fill area of erased area for canvas

383
November 21, 2016, at 9:26 PM

I am trying to fill color in image using below code snippet for filling color on Image of canvas . Its successfully filling color in canvas. Now I am trying to erase filled color on touch of user using this code snippet for erasing color on Image of canvas . Its erasing color & setting transparent area on that touched position. Now I want to refill that area on user touch with colors but its not allowing me to color on that because of transparent pixels. So Is there any way to refill pixels with color Or Is there any other way to erase color from image of canvas ? Any reply will be appreciated.

code snippet for 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 for erasing color on Image of canvas

(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

Warning untested code!

// 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();
Rent Charter Buses Company
READ ALSO
How to stop font flickering & dissapering in jquery animation.

How to stop font flickering & dissapering in jquery animation.

http://codepen. io/anon/pen/ojBZZo[nnn]I am having trouble with this.

297
slider and lines in openseadragon viewer

slider and lines in openseadragon viewer

Is it possible to add lines and sliding openseadragon viewer like this image?.

458
Data binding for multiple dropdownlists for default shown values

Data binding for multiple dropdownlists for default shown values

I have 3 dropdownlists to be populated(cascading). Country, City and Factory.

306