[ACCEPTED]-How to fetch a remote image to display in a canvas?-canvas

Accepted answer

Score: 24

Use the built-in JavaScript Image object.

Here is a very simple 6 example of using the Image object:

myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

Here is 5 a more appropriate mechanism for your scenario 4 from the comments on this answer.

Thanks 3 olliej!

It's worth noting that you can't synchronously 2 request a resource, so you should actually 1 do something along the lines of:

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

Score: 8

If you want to draw an image to a canvas 2 you also need to wait for the image to actually 1 load, so the correct thing to do will be:

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

Score: 2

To add an image in JavaScript you can do 3 the following:

myimage = new Image()
myimage.src='http://....'

If an image on your page has 2 an ID "image1", you can assign the src of 1 image1 to myimage.src.

Score: 1

I have found that using prototypes is very 21 helpful here. If you aren't familiar with 20 them, prototypes are part of objects that 19 allow you to set your own variables and/or 18 methods to them.

Doing something like:

Image.prototype.position = {
    x: 0,
    y: 0
}

Image.prototype.onload = function(){
    context.drawImage(this, this.position.x, this.position.y);
}

allows 17 you to set position and draw to the canvas 16 without too much work.

The "position" variable 15 allows you to move it around on the canvas.
So 14 it's possible to do:

var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

and the image will automatically 13 draw to the canvas at (20,200).

Prototype 12 works for all HTML and native Javascript 11 objects. So

Array.prototype.sum = function(){
    var _sum = 0.0;
    for (var i=0; i<this.length; i++){
        _sum += parseFloat(this[i]);
    }
    return _sum;
}

gives a new function to all Arrays.

However,

var Bob;
Bob.Prototype.sayHi = function(){
    alert("Hello there.");
}

will 10 not work (for multiple reasons, but i'll 9 just talk about prototypes).
Prototype is 8 a "property" of sorts, which contains all 7 the your properties/methods that you input, and 6 is already in each of the HTML and native 5 Javascript objects (not the ones you make).
Prototypes 4 also allow for easy calling (you can do 3 "myImg.position.x" instead of "myImg.prototype.position.x" ).

Besides, if 2 you are defining you variable, you should 1 do it more like this.

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}

Score: 0

Using Promises:

class App {
  imageUrl = 'https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4HZBo'

  constructor(dom) {
    this.start(dom)
  }

  async start(dom) {
    const appEl = dom.createElement('div')
    dom.body.append(appEl)
    
    const imageEl = await this.loadImage(this.imageUrl)
    
    const canvas = dom.createElement('canvas')
    canvas.width = imageEl.width
    canvas.height = imageEl.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(imageEl, 0, 0)
    
    appEl.append(canvas)
  }
  
  loadImage = async (url) => 
    new Promise((resolve) => {
      const imageEl = new Image()
      imageEl.src = url
      imageEl.onload = () => resolve(imageEl)
    })
}

new App(document)

Source: stackoverflow.com

[ACCEPTED]-How to fetch a remote image to display in a canvas?-canvas

Put text on an image and save as image

Wait for image to be loaded before going on

canvas- Cropping images in different shapes

HTML5 how to draw transparent pixel image in canvas

HTML5 canvas, resize a background image

Wrap an image around a cylindrical object in HTML5 / JavaScript

Image to Canvas / HTML5 Conversion

Canvas tainted by CORS data and S3

Creating heatmaps using <canvas> element?

html5 canvas units