How to create a shape with a hole in QML? - qt

Question

I want to create a kind of masking layer which consists of a black area with holes in it. Through the holes it should be possible to see the background. In the simplest version I it's just an rectangle covering the whole screen with an opening in the middle. As shown in the sample picture below.
My first approach was to use QML's Context2D feature: https://doc.qt.io/qt-5/qml-qtquick-context2d.html. Maybe it's totally wrong to do it this way, but maybe it's a good starting point. I tried to create an rectangle (which works) and a clipping area (which doesn't work). Besides the fact my implementation of the clipping doesn't work I would have the problem that the clip() command erases the area outside its path but not inside (at least that's what I understood from the docs: https://doc.qt.io/qt-5/qml-qtquick-context2d.html#clip-method).
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.fillStyle = "black"
ctx.beginPath();
ctx.fillRect(0, 0, Sizes.rootWindow.width, Sizes.rootWindow.height);
ctx.fill();
}

Answer 1

if the hole is exactly centered and the borders are all have the same size, you could use a transparent rectangle with borders:
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: "black"
border.width: 50
}

Answer 2

I found the solution myself by rereading the Qt docs. There is a function to create transparent rectangles inside a given canvas which is called "clearRect(...)": https://doc.qt.io/qt-5/qml-qtquick-context2d.html#clearRect-method
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.fillStyle = "black"
ctx.beginPath();
ctx.fillRect(0, 0, 1000, 600);
ctx.fill();
ctx.clearRect(10, 10, 600, 100)
}
For more advanced shapes OpacityMask suggested by Frank Osterfeld is definitely the way to solve this. But for rectangle I think my solution is more straight forward.