一个结构中的三个图像js Canvas，清除并更新特定图像

Question

我有一块布料帆布。

在HTML中

<canvas id="template-editor-canvas" width="585" height="460"></canvas>

在SCRIPT中

var canvas = new fabric.Canvas('template-editor-canvas', {
    selectionColor: 'red',
    selectionLineWidth: 2
});

$scope.updateOnNgClickOne = function () {
    fabric.Image.fromURL("imageOne.png", function(img) {
                        canvas.add(img).renderAll();
                      }, {
                            width: 167,
                            height: 74,
                            left: 2,
                            top: 2,
                            angle: 0,
                            hasBorders: false,
                            hasControls: false,
                            hasRotatingPoint: false,
                            lockMovementX: false,
                            lockMovementY: false
                         });
};

$scope.updateOnNgClickTwo = function () {
    fabric.Image.fromURL("imageTwo.png", function(img) {
                        canvas.add(img).renderAll();
                      }, {
                            width: 167,
                            height: 74,
                            left: 2,
                            top: 200,
                            angle: 0,
                            hasBorders: false,
                            hasControls: false,
                            hasRotatingPoint: false,
                            lockMovementX: false,
                            lockMovementY: false
                         });
};

$scope.updateOnNgClickThree = function () {
    fabric.Image.fromURL("imageThree.png", function(img) {
                        canvas.add(img).renderAll();
                      }, {
                            width: 167,
                            height: 74,
                            left: 2,
                            top: 400,
                            angle: 0,
                            hasBorders: false,
                            hasControls: false,
                            hasRotatingPoint: false,
                            lockMovementX: false,
                            lockMovementY: false
                         });
};

问题是每当我点击时，每次都会在现有的基础上添加新的图像对象。如果我在渲染（canvas.clear（））之前尝试清除，整个画布都会被清除。

我需要的是当我点击更新ImageOne时，必须删除并重新呈现该特定图像。

我期待如下。除了这个ImageFromUrl方法之外，还可以。

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.remove(rect); // remove previously-added fabric.Rect