How Can I Combine Alpha With Compositing In Images?

I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. The canvas contains an Image as shown below. Now I want to erase pixels but being combined with a certain

Solution 1:

You can use 'destination-out` compositing to "erase" pixels on a canvas. By default, the erasure will be completely through to the background.

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.fillRect(100,50,50,50);

But you can also control how much alpha is erased by setting the globalAlpha to less than 1.00. This causes the erasure to reduce the alpha of the existing pixels--similar to color blending.

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.globalAlpha=0.50;
ctx.fillRect(200,50,50,50);

Solution 2:

// Get the canvas pixel array.var img = context.getImageData(x, y, w, h);

// then loop through the array // modifying each pixel one by one as you needfor (var i = 0, l = img.data.length; i < l; i += 4) {
    img.data[i  ] = ...; // red
    img.data[i+1] = ...; // green
    img.data[i+2] = ...; // blue
    img.data[i+3] = ...; // alpha
}

// put back the data in canvas
context.putImageData(img, x, y);

The strength of the erasor would probably be set via the alpha channel. Hope that gets you started.