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).

Answer 2

You surely can clip using the 'inverted' clip shape of your style : just draw first the screen outline, then draw your clipping path -without using beginPath-, then close the path and clip.
This way the shape you describe is a 'hole' within the screen.
The path function must describe a closed path.

A demo is here : http://jsfiddle.net/gamealchemist/9DuJL/40/
We can see that it works even with several shapes, provided they do not intersect.

The code looks like :

// clips the canvas with the invert of provided path function
// if pathFunction is an array, remove clips defined by all functions
function clipRevert(pathFunction) {
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, ctx.canvas.height);
    if (Array.isArray(pathFunction)) pathFunction.forEach(execute);
    else pathFunction();
    ctx.clip();
}


function execute(fn) {
    return fn();
}

example of use : (will draw an image using reversed clip of a circle) :

function circlePath(x, y, r) {
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
}

window.clipRevertExample = function () {
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    clipRevert(circlePath.bind(null, 100, 60, 40));
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

Last remark : you can in fact choose an arbitrary base shape to substract from.

Answer 3

You can use context.globalCompositeOperation="xor" to remove from your existing image based on any path or drawing.

This compositing mode will "undraw" the existing pixels using any drawing you do after applying the compositing.

In this case, the existing image will be "undrawn" based on your arc:

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9DuJL/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
    ctx.save();
    ctx.drawImage(img,0,0);
    ctx.globalCompositeOperation="xor";
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
img.src="http://i.imgur.com/gwlPu.jpg";


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=200 height=158></canvas>
</body>
</html>