Question

Is there a way to use an image as a clipping mask instead of creating a shape like this:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();

I have tried to context.drawImage('myimg.png') on top of the context and clip but that did not work.

Answer 1

You can only directly clip using a path.

If you have an image that you wish to clip by, you can probably achieve this by drawing your content in another canvas, and then using globalCompositeOperation combined with drawImage (with the mask) to remove the bits you don’t want.

You would then then use .drawImage again (possibly with a different globalCompositeOperation) to merge that clipped image with your original content.

See for example http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/