How do a cut out one shape from another (XOR) in Canvas when shape is partially transparent? - html

Question

Normally to cut one shape out from another using Canvas, I've used the globalCompositeOperation option "xor":
var c2 = document.getElementById('canvas').getContext('2d');
c2.globalCompositeOperation = "xor";
c2.fillRect(0, 0, 200, 200);
c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1
However, when either the fillStyle has a alpha value < 1, or the globalAlpha of the context is < 1, the "cut-out" shape is no longer completely invisible.
Specifically, if the alpha is >0.5 and <1, you see a lighter version of the shape. If the alpha is 0.5, there is no cut-out visible at all. And if alpha is <0.5, we get the inverse: the shape that's supposed to be cut out is in fact darker than the first shape.
This can be seen at http://jsfiddle.net/N7aXY/2/.
You can try changing the alpha value to see the different effects.
Is there any way to completely cut out a shape when the background shape has an alpha < 1?

Answer 1

Ok, this is a bit "hackish", but here we go anyway:
Set compositing to XOR.
Draw to "cut" shape2 from shape1 normally.
Save the canvas.
Set compositing to normal (source-over).
Set globalAlpha to your desired level.
Clear the canvas and redraw the saved image.
Results: globalAlpha and globalCompositing work in harmony!
Here is code and a Fiddle: http://jsfiddle.net/utttk/1/
ctx.fillStyle="red";
ctx.globalCompositeOperation="xor";
ctx.fillRect(0,0,200,200);
ctx.fillRect(170,0,30,30);
var png=canvas.toDataURL();
ctx.globalCompositeOperation="source-over"; // "normal" compositing
ctx.globalAlpha=.2;
var image=new Image();
image.onload=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(image,0,0);
}
image.src=png;