Load image from url and draw to HTML5 Canvas

Question

I am having trouble loading an image from a url in javascript. The code below works, but I don\'t want to have to have the image loaded from html. I want to load the image f

Answer 1

In case you want a Promise version instead of the onload approach:

let ctx = document.querySelector("#myCanvas").getContext("2d");

async function drawImage(url) {
  let img = new Image();
  await new Promise(r => img.onload=r, img.src=url);
  ctx.drawImage(img, 0, 0);
}

drawImage("https://example.com/image.png");