Перетащите изображение внутри холста, не затрагивая уже добавленные элементы

Question

У меня есть требование, которое я стараюсь выполнить следующим образом.

Я добавляю изображение на холст, затем добавляю другое изображение на холст и позволяю пользователю вводить его имя, чтобы мы могли добавить это имя на второе изображение.Затем, когда пользователь нажимает кнопку «Добавить бриллиант» , на холст добавляется третье изображение (пока все хорошо).

Теперь мне нужно разрешить пользователю перетаскивать третье изображение изposition, он был добавлен в позицию внутри холста.

Так что при добавлении функции перетаскивания мне нужно сделать холст пустым, что приведет к удалению обоих уже добавленных изображений.Поэтому мне нужно дать функциональность перетаскивания, не затрагивая уже добавленные элементы.

Вот мой код:

var canvas = document.getElementById('canvas');
// canvas.width = canvas.scrollWidth;

var ctx = canvas.getContext('2d');

var image = new Image();
//callback functionwhen image is loaded
image.onload = function() {


  ctx.drawImage(image, 10, 10, 198, 108);
}

image.src = 'https://lorempixel.com/150/150?1';
var Text = '';

function AddImageToCanvas() {
  var imageToAdd = new Image();

  imageToAdd.src = 'https://lorempixel.com/150/150';
  imageToAdd.onload = function() {
    ctx.drawImage(imageToAdd, 60, 100, 100, 60);
    ctx.font = "10px Arial";
    Text = 'sample text';
    // ctx.fillText(Text, 70, 110);
    ctx.save();
    ctx.translate(10, 30);
    ctx.rotate(-45);
    ctx.fillText(Text, -30, 150);
    ctx.restore();
    //var img = canvas.toDataURL("image/png");
    //document.write('<img src="' + img + '"/>');
  }
}

function AddDiamondImageToCanvas() {
  var DiamondImage = new Image();
  DiamondImage.src = 'https://lorempixel.com/30/30';
  DiamondImage.onload = function() {
    ctx.drawImage(DiamondImage, canvas.width - 15, canvas.height - 15, 15, 15);
  }
}

<canvas style=" height:490px;width:800px; border:1px solid;" id="canvas">Sorry your browser does't support canvas</canvas>
<input type="text" id="textToAdd" />
<a onclick="AddImageToCanvas()">Add image</a>
<a onclick="AddDiamondImageToCanvas()">Add Diamond</a>

Для изображения с ромбами (маленькое в фрагменте) мне нужно добавить функцию перетаскивания, поскольку она уже добавлена ​​на холст, если пользователь перетаскивает ее из этой позиции вили около «образца текста» его следует переместить в ту позицию, где он щелкает левой кнопкой мыши.