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 from a url using pure javascript.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);
Simple, just create an image object in JavaScript, set the src, and wait for the load event before drawing.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';<canvas id="myCanvas"></canvas>
img.addEventListener("load", () => ctx.drawImage(img, 0, 0)) over setting onload.
onload is fine.addEventListener is preferable over the on* properties. A possible advantage here is that you don’t have to worry about accidentally overwriting a previous load event handler. The on* properties come from the legacy DOM 0 event model; they are still being added for newer event types, and they can be used for feature detection. However, for regular event binding, addEventListener is where the standardization efforts are currently headed. It’s in a way “more standard”.Easy as this...
var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
ctx.drawImage(img,0,0);
}
In case you want a Promise version instead of the onload approach:
async function drawImage(url, ctx) {
let img = new Image();
await new Promise(r => img.onload=r, img.src=url);
ctx.drawImage(img, 0, 0);
}
let ctx = document.querySelector("#myCanvas").getContext("2d");
await drawImage("https://example.com/image.png", ctx);
