Javascript 如何删除结构中先前添加的矩形对象？

鼠标单击事件时，将向画布添加一个矩形：

    canvas.on({
        'mouse:down': function(options) {
            canvas.add(new fabric.Rect({
                left: options.e.clientX,
                top: options.e.clientY,
                fill: 'red',
                width: 20,
                height: 20
            }));
        }
    });

如果单击其他位置，将绘制第二个矩形，依此类推。对于每个新的鼠标单击事件，我希望删除上一个矩形。 在这种情况下，我不能使用动画，因为在我的应用程序中会绘制很多矩形，我需要在新位置上重新绘制新矩形，而不是移动其中的每一个

---

在原生画布中，我可以使用clearRect清除整个画布，并在新位置重新绘制一个新矩形。在使用Fabric.js时，我如何才能做到这一点？

您只能创建一个矩形对象，并为后续的鼠标按下事件更改其左侧和顶部位置

演示 var canvas=newfabric.canvas'canvas'，{selection:false}； var rect=new fabric.rect{ 填充：“红色”， 宽度：20， 身高：20， 可见：假 }; canvas.addrect； canvas.on'mouse:down'，functionoptions{ var pointer=canvas.getPointeroptions.e； 矩形集{ 左：指针.x， 顶部：pointer.y， 可见：正确 }; canvas.renderal； }; 帆布{ 边框：2×000； }

---

谢谢你的回答，但我得说这并不是我所需要的。在事件中，我需要更改整个对象组的坐标，而不仅仅是一个，所以我通过以下方式解决了我的问题：1将对象添加到画布后，将其放入ListOfHexObjectRemove.pushrect 2在事件中为ListOfHexObjectRemove{canvas.RemovelistOfHexObjectRemove[i]}中的i从画布中移除所有这些对象；3使用新坐标创建新对象。我不确定这是解决这个问题的最好办法，所以如果有人能拿出更好的办法，那就太好了。@Vitozz_RDX创建一个小组怎么样？你会拉小提琴吗？