如何在HTML画布上拖放文本或图像？

I'm working on web custom app, where a user can upload image or add text over a html canvas, and also can drag and drop to any position over a canvas. and finally save it into database once "save button" is clicked. how will i achieve that?

here is what i have been tried.

index.php

<div class="container">
  <section class="inputs">
    <div class="upload-wrap">
      <label for="upload-image" class="instruction">Upload an image</label>
      <input type="file" id="upload-image">
    </div>
<img crossOrigin="Anonymous" id="salt-bae" src="demo.png"/>
</section>

<section class="meme">
    <div id="draggable" contentEditable="true">
          text here
    </div>

    <canvas id="canvas" width="594" height="592">
    Canvas requires a browser that supports HTML5.
    </canvas>

    <input type="text" name="text" id="AddText">
  <br>
<button id="btnAdd">Add text</button>
</section>

canvas.js

function drawBackgroundImage(canvas, ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const img = document.getElementById('salt-bae');  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

}

function drawSalt(src, canvas, ctx) {
  const image = new Image();
  image.src = src;
  image.crossOrigin = 'anonymous';

  image.onload = function() {
    ctx.drawImage(image, 0, 0,100,100);
}

return image;
}

function updateImage(file, img){
  img.src = URL.createObjectURL(file);
}

function addLink() {
  var link = document.createElement('a');
  link.innerHTML = 'save image';
  link.addEventListener('click', function(e) {
   const photo = canvas.toDataURL("image/png");
   $.ajax({
       url: "process.php",
       type: "POST",
       data:{check: 1,image: photo},
       success: function(response){
       }
   })
}, false); 
  link.className = "instruction";
  document.querySelectorAll('section')[1].appendChild(link);
}

function AddText(canvas, ctx){
  $("#AddText").keyup(function(){
    const text = $(this).val();
    const dragBox = $("#draggable");
    const textX = dragBox.offset().left - canvas.offset().left;
    const textY = dragBox.offset().top - canvas.offset().top + 12;


    $("#draggable").html(text);

    ctx.fillText(text, textX,textY);

});
}

onload = function(){
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
drawBackgroundImage(canvas, ctx);
AddText(canvas, ctx);
const saltImage = drawSalt('', canvas, ctx);

const input = document.querySelector("input[type='file']");

input.addEventListener('change', function(){
  drawBackgroundImage(canvas, ctx);
    updateImage(this.files[0], saltImage);

});
addLink();
}

My achievements are similar to this site: custom ink