Load image from url and draw to HTML5 Canvas
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);
Easy as this...
var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
ctx.drawImage(img,0,0);
}
Simple, just create an image object in JavaScript, set the src
, and wait for the load event before drawing.
Working Example:
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>