With the following:
const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'red',
backgroundColor: 'rgb(0,0,0)',
strokeWidth: 2
});
Or this:
const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'red',
backgroundColor: 'transparent',
strokeWidth: 2
});
The resulting background-color is black. What I would like to achieve is a really transparent background. That is to say that its opacity is 0 but that the border and its properties are preserved. Currently the resulting Rect object looks like this:
The solution:
const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'red',
fill: 'transparent',
strokeWidth: 2
});
Or:
const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'red',
fill: '',
strokeWidth: 2
});
Or:
const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'red',
fill: 'rgba(255,255,255,0)',
strokeWidth: 2
});