function previewImage(dataTransfer, canvasId) {
  let canvas = document.getElementById(canvasId);
  let ctx = canvas.getContext('2d');
  //canvas.width = 1200;
  //canvas.height = 800;
  let dx = 0;
  let dy = 0;
  let width = 0;

  for (let i = 0; i < dataTransfer.files.length; i++) {
    let fileReader = new FileReader();
    fileReader.onload = (function() {
      let image = new Image();
      image.src = fileReader.result;
      image.onload = (function () {
        //alert('image.width='+image.width);
        width += image.width;
        canvas.width = width;
        canvas.height = image.height;
        ctx.drawImage(image, dx, dy);
        dx += image.width;
      });
    });
    fileReader.readAsDataURL(dataTransfer.files[i]);
  }
}

function previewImage2(canvasId, src) {
  let canvas = document.getElementById(canvasId);
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.src = src;
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }
}

function createCanvas(canvasId, parentId) {
  let canvas = document.getElementById(canvasId);
  if (canvas == null) {
    canvas = document.createElement('canvas');
    canvas.id = canvasId;
    let parent  = document.getElementById(parentId);
    $(parent).empty();
    parent.appendChild(canvas);
  }
}

function previewImage3(dataTransfer, canvasId, canvasParentId) {
  createCanvas(canvasId, canvasParentId);
  previewImage(dataTransfer, canvasId);
}