let drop, canvas;
function initiate() {
  const images = document.querySelectorAll("#picturesbox > img");
  for (let i = 0; i < images.length; i++) {
    images[i].addEventListener("dragstart", dragged);
    images[i].addEventListener("dragend", ending);
  }
  drop = document.getElementById("canvas");
  canvas = drop.getContext("2d");

  drop.addEventListener("dragenter", function(event) {
    event.preventDefault();
  });
  drop.addEventListener("dragover", function(event) {
    event.preventDefault();
  });
  drop.addEventListener("drop", dropped);
}
function ending(event) {
  const element = event.target;
  element.style.visibility = "hidden";
}
function dragged(event) {
  const element = event.target;
  event.dataTransfer.setData("Text", element.id);
  event.dataTransfer.setDragImage(element, 0, 0);
}
function dropped(event) {
  event.preventDefault();
  const id = event.dataTransfer.getData("Text");
  const element = document.getElementById(id);
  const posx = event.pageX - drop.offsetLeft;
  const posy = event.pageY - drop.offsetTop;
  canvas.drawImage(element, posx, posy);
}
window.addEventListener("DOMContentLoaded", initiate);