Adding mask layer over fabric.js canvas

Question

I have a problem that I'd like to add round mask on top of the editable fabric.js HTML5 canvas. Similar problem is described in this article:

Creating an Image Mask with HTML 5 Canvas

My problem is that when I add this layer on top of the fabric.js canvas then my canvas is not editable any more inside this transparent circle. This means that the top element (the mask) captures the click/drag event, but I'd like to move the items under this mask element. Looking for ideas, how to work around this problem.

Answer 1

You can utilize built-in support for masks in fabric.

Here's an example of creating a circular mask at 100/100 with the radius of 200:

var canvas = new fabric.Canvas('...');
// ...
canvas.clipTo = function (ctx) {
  ctx.arc(100, 100, 200, 0, Math.PI*2, true);
};