Adding a mask layer on top of fabric.js canvas

Question

I have a problem that I would like to add a circular mask on top of the HTML5 canvas editable fabric.js . A similar problem is described in this article:

Create an image mask with an HTML 5 canvas

My problem is that when I add this layer on top of the fabric.js canvas, then my canvas is no longer editable inside this transparent circle. This means that the top element (mask) captures the click / drag event, but I would like to move the elements below this mask element. Looking for ideas on how to get around this problem.

Answer 1

You can use the built-in mask support in the fabric.

Here is an example of creating a circular mask at 100/100 with a radius of 200:

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