cssfabricjs

Transparent backgroundColor of a Fabric's Rect object. is it possible?


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:

Image


Solution

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

    Image