javascript - Adding mask layer over fabric.js canvas - Stack Overflow

admin管理员组

文章数量:1307576

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.

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.

• javascript
• html
• canvas
• fabricjs

Share Improve this question Follow asked Nov 27, 2011 at 22:15 ainlaainla 52999 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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);
};

本文标签： javascriptAdding mask layer over fabricjs canvasStack Overflow