如何实现Fabric.js中Rect对象的完全透明背景？

你尝试通过backgroundColor属性设置Rect的背景色，但无论设为rgb(0,0,0)还是transparent，最终都显示黑色，需要实现背景完全透明同时保留红色边框。

正确实现代码 #

const rect = new fabric.Rect({
    left: 100,
    top: 50,
    width: 200,
    height: 100,
    objectCaching: false,
    stroke: 'red',
    fill: 'transparent',
    strokeWidth: 2
});

问题原因 #

Fabric.js中，backgroundColor并非控制图形内部填充的属性，它多用于画布或容器级别的背景设置。对于fabric.Rect这类基础图形，控制填充色的是fill属性。你之前错误使用backgroundColor，导致Fabric.js采用默认黑色填充，所以无论怎么设置都无法得到透明背景。

补充说明 #

如果不需要任何填充，也可以直接省略fill属性，fabric.Rect默认的填充就是透明的。

内容的提问来源于stack exchange，提问作者Manuel Cera Vera