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

问题

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?

回答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;

来源：https://stackoverflow.com/questions/15579126/how-do-a-cut-out-one-shape-from-another-xor-in-canvas-when-shape-is-partially

标签

html

canvas