Canvas research log

var canvas = document.getElementById("canvas");
// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = size * scale;
canvas.height = size * scale;

<input type="file" accept="image/*">

document
  .querySelector("input[type=file]")
  .addEventListener("change", function () {
    handleFiles(this.files);
  });

function handleFiles(files) {
  if (!files.length) {
    // error haandle
  } else {
    return window.URL.createObjectURL(files[0]);
  }
}

<a id="download" href="#">Download Canvas</a>

document.querySelector("#download").addEventListener("click", function () {
  downloadCanvas({
    link: this,
    canvasDom: document.querySelector("canvas"),
  });
});

function downloadCanvas(arg) {
  var link = arg.link,
    canvasDom = arg.canvasDom,
    filename = arg.filename || "canvas.png";

  if (!link || !canvasDom) {
    console.error("downloadCanvas: link or canvasDom not set");
    return;
  }

  var url = canvasDom.toDataURL("image/png");
  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
  url = url.replace(/^data:image\/[^;]*/, "data:application/octet-stream");
  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
  url = url.replace(
    /^data:application\/octet-stream/,
    "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=" +
      filename
  );

  link.href = url;
}

var stage = new Konva.Stage({
  container: "container",
  width: window.innerWidth,
  height: window.innerHeight,
});

var layer = new Konva.Layer();
stage.add(layer);

function initCanvas(arg) {
  var path = arg.path,
    x = arg.x,
    y = arg.y,
    width = arg.width,
    height = arg.heightq,
    shape = arg.shape;
  // main API:
  var imageObj = new Image();
  imageObj.onload = function () {
    var yoda = new Konva.Image({
      x: x,
      y: y,
      image: imageObj,
      width: width,
      height: height,
    });

    // add the shape to the layer
    layer.add(shape);
    layer.batchDraw();
  };
  imageObj.src = arg.path;
}

function downloadURI(uri, name) {
  var fileName = "grid_" + new Date() + ".png";
  var dataURL = stage.toDataURL({ pixelRatio: 1 });

  dataURL = dataURL.replace(
    /^data:image\/[^;]*/,
    "data:application/octet-stream"
  );
  dataURL = dataURL.replace(
    /^data:application\/octet-stream/,
    "data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=" +
      fileName
  );

  var link = document.createElement("a");
  link.download = fileName;
  link.href = dataURL;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

document.getElementById("save").addEventListener(
  "click",
  function () {
    downloadURI();
  },
  false
);