<div>
  <input type='file'><button onclick='loadImage();'>Upload img</button>
</div>

<canvas id="canvas"></canvas>

<div>
  <a href="#" download="result.jpg" onclick="downloadImage()">Download Image</a>
</div>

canvas {
  width: 250px;
  height: 250px;
  margin: 1rem 0;
  border: 1px solid;
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bg = new Image();

bg.src = "https://images.unsplash.com/photo-1513539901-c220b3c7bf19?q=80&w=500&h=500&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
bg.crossOrigin = "Anonymous";

bg.onload = () => {
  ctx.drawImage(bg, 0, 0, 250, 250);
}

canvas.width = 250;
canvas.height = 250;

function loadImage() {
  var input = document.querySelector("input"),
      file = input.files[0],
      reader = new FileReader(),
      img;

  reader.onload = drawImage;
  reader.readAsDataURL(file);

  function drawImage() {
    img = new Image();
    img.onload = function () {
      ctx.globalAlpha = 0.5;
      ctx.drawImage(img, 0, 0, 150, 150);
    };
    img.src = reader.result;
  }
}

function downloadImage() {
  var result = canvas.toDataURL("image/jpg");
  document.querySelector('a').href = result;
}