Make a hole in canvas background or in a rect

Question

I use fabric.js and I need a transparent rect to be on a canvas, but I need to use background.
The problem is that I need background to be transparent under the rect.

I've created a fiddle to illustrate my problem: http://jsfiddle.net/goooseman/5xLE4/2/ (I need background to be transparent under the square).

I think that it is impossible to make a hole in a background, but we can use another rect as a background. I've created another fiddle to show it: http://jsfiddle.net/goooseman/cNJwL/1/ I use this code to make background rect:

var backgroundRect = new fabric.Rect({
    left: 0,
    top: 0,
    fill: 'red',
    width: canvas.width,
    height: canvas.height
});

But how can I make a hole in the background rect under the upper rect?

Maybe somewhat related: http://stackoverflow.com/questions/4875623/cut-out-circular-image-in-canvas — Sumurai8, Dec 05 '13 at 15:14
Can't draw 4 rectangles, cause in my project I use rect with rounded corners and I can't use clipping mask, cause I need to background to be outside mask, not inside it. — goooseman, Dec 05 '13 at 15:19
Can't you make a clipping mask like this: http://img191.imageshack.us/img191/569/ex1g.png ? — Sumurai8, Dec 05 '13 at 20:28

score 3 · Accepted Answer · edited May 23 '17 at 12:17

Maybe this could help (as found in this question).

You need to first, add the canvas background object to which you want to do the "hole". Then, you create a new object (the cutter), and set the property globalCompositeOperation = 'destination-out', and then you add it to the canvas.

Just like this:

var h = new fabric.Rect({width: canvas.width, height: canvas.height, fill: 'rgba(0,0,0,0.5)'})
var z = new fabric.Circle({radius: 100, top:100, left: 100, globalCompositeOperation: 'destination-out'})
canvas.add(h).add(z)

This way, you add first the global object, and then you add the object as a "cutter". I think it will act as a cutter for everything, so if you have other objects "behind", they will be cut too (haven't tested it).

Hope this helps!!

Perfect dude. Exactly what I needed. I was aware of 'destination-out' for canvas but wasn't sure how to apply in fabricjs. — Luke Fixt, Mar 20 '17 at 02:27

score 1 · Answer 2 · answered Dec 05 '13 at 15:17

If it is just a square that needs to be cut out, you can simply draw 4 squares around it with the background colour.

fabric.StaticCanvas('canvas');
canvas.setHeight(300);
canvas.setWidth(300);

var bgrect = new fabric.Rect({
    left:0,
    top:0,
    fill: 'red',
    width: 100,
    height: 300,
});
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:200,
    top:0,
    fill: 'red',
    width: 100,
    height: 300,
});
canvas.add(bgrect);
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:100,
    top:0,
    fill: 'red',
    width: 100,
    height: 100,
});
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:100,
    top:200,
    fill: 'red',
    width: 100,
    height: 100,
});
canvas.add(bgrect);

See this fiddle

Thank yoy for your answer, but in my project I use rect with rounded corners, so I cant do it this way — goooseman, Dec 05 '13 at 15:47

score 0 · Answer 3 · answered Oct 16 '20 at 10:41

I know I am late, but this can be useful for some users who can look for an answer

drawRectangleWithHole(document.getElementById('canvas').getContext('2d'), "black", 50, 50, 200, 200, 50, 50, 100, 100)

function drawRectangleWithHole(ctx, color, x, y, width, height, holeX, holeY, holeWidth, holeHeight) {
  ctx.fillStyle = color
  ctx.fillRect(x, y, holeX, height)
  ctx.fillRect(x, y, width, holeY)
  ctx.fillRect(x + holeX + holeWidth, y, width - (holeX + holeWidth), height)
  ctx.fillRect(x, y + holeY + holeHeight, width, height - (holeY + holeHeight))
}

<canvas id="canvas" width="300" height="300"><canvas>

Note that the hole's X and Y coordinates are relative to the rectangle

Make a hole in canvas background or in a rect

3 Answers3