Три изображения в одной ткани js Canvas, очистка и обновление определенного изображения

Question

У меня есть тканевый холст.

В HTML

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

В сценарии

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