CODEWITHSUNDEEP
javascripthtmlimagecanvashtml5-canvas
J8m
J8m

Reputation: 168

Load image from url and draw to HTML5 Canvas

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);

Upvotes: 13

Views: 44665

Answers (3)

joe
joe

Reputation: 5522

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);

Upvotes: 2

markE
markE

Reputation: 105015

Easy as this...

var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
    ctx.drawImage(img,0,0);
}

Upvotes: 7

Alexander O'Mara
Alexander O'Mara

Reputation: 60507

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>

Upvotes: 35

Related Questions