How can I clip INSIDE a shape in HTML5 canvas?

Question

I've found a number of examples for clipping the outside region of an arc (e.g.: this example). I can't seem to figure out how to clip inside the arc shape instead.

Here is an example of how I'm currently clipping the outside region, which is essentially the opposite of what I want:

ctx.save();

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.clip();

ctx.beginPath();
ctx.lineWidth     = 1;
ctx.shadowBlur    = 10;
ctx.shadowOffsetX = shadowOffset;
ctx.shadowColor   = '#000000';
ctx.strokeStyle   = '#000000';
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();

ctx.restore();

Answer 1

Available options

For irregular shapes you can use two techniques:

1. Composite mode
2. Clipping

IMHO the better choice to use the actual clipping mode or the composite mode destination-out.

As markE says in his answer xor is available too, but xor only inverts alpha pixels and doesn't remove the RGB pixels. This works for solid images with no transparency, but where you have existing pixels with transparency these might give you the opposite effect (becoming visible) or if you later use xor mode with something else drawn on top the "clipped" area will show again.

Clipping

By using clipping you can simply use clearRect to clear the area defined by the path.

Example:

/// save context for clipping
ctx.save();

/// create path
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();

/// set clipping mask based on shape
ctx.clip();

/// clear anything inside it
ctx.clearRect(0, 0, offset, offset);

/// remove clipping mask
ctx.restore();

ONLINE DEMO FOR CLIPPING

Source image: an image that has partial semi-transparent pixels and full transparent where the white from background comes through -

Result:

We punched a hole in it and the background shows through:

Composite mode: destination-out

Using composite mode destination-out will clear the pixels as with clipping:

ctx.beginPath();
ctx.arc(offset * 0.5, offset * 0.5, offset * 0.3, 0, 2 * Math.PI);
ctx.closePath();

/// set composite mode
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();

/// reset composite mode to default
ctx.globalCompositeOperation = 'source-over';

ONLINE DEMO FOR COMPOSITE MODE:

Result:

Same as with clipping as destination-out removes the pixels.

Composite mode: xor

Using xor in this case where there exists transparent pixels (see online example here):

Only the alpha values was inverted. As we don't have solid pixels the alpha won't go from 255 to 0 (255 - 255) but 255 - actual value which result in non-cleared background using this mode.

(if you draw a second time with the same mode the "removed" pixels will be restored so this can be utilized in other ways).