const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const readBtn = document.querySelector(".read-btn");
const writeBtn = document.querySelector(".write-btn");
const imagePlaceholder = document.querySelector(".clipboardImage");

var img = new Image();
img.setAttribute("crossorigin", "anonymous");
img.onload = function() {
  ctx.drawImage(img, 0, 0, 150, 150);
};

img.src =
  "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQnJzq2li66aVO7b8yzxhNnxX--5H_IXifcGRaDwXihkjf8ChJ1";

writeBtn.addEventListener("click", () => {
  canvas.toBlob(function(blob) {
    navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
  });
});

readBtn.addEventListener("click", async () => {
  try {
    const items = await navigator.clipboard.read();  
    for (const clipboardItem of items) {
      for (const type of clipboardItem.types) {
        if (type === "image/png") {
          console.log(type);
          try {
            const blob = await clipboardItem.getType(type);
          
          console.log(blob);
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const img = new Image();
          img.width=150;
          img.height=150;
          img.onload = function() {
            ctx.drawImage(img, 0, 0);
            imagePlaceholder.appendChild(canvas);
          };
          img.src = URL.createObjectURL(blob);
          } catch (error) {
            console.error('Oh no:', error);
          }          
        }
      }
    }
  } catch(err) {
    console.error('Oh no:', err);
  }
});