Using drawImage in HTML5

Question

Fact : The following code is valid.

var img = new Image();
img.onload = function() {
    context.drawImage(img, 32, 32);
};
img.src = "example.png";

First Observation : The following will not draw to canvas.

var img = new Image();
img.src = "example.png";
context.drawImage(img, 32, 32);

Second Observation : The following will draw to canvas (eventually)...

var img = new Image();
img.src = "example.png";
setInterval(function() {context.drawImage(img, 32, 32);}, 1000);

Why is it that I need to call the drawImage function on a callback? And if that is the case, why does it eventually work when nested in a setInterval function?

Joseph · Accepted Answer · 2013-04-15 01:09:58Z

5

When you set the src of the image object, the browser starts to download it. But you may or may not get that image loaded by the time the browser executes the next line of code. That's why you are drawing a "blank" image, because it ain't loaded just yet.

You need to place an onload handler to know when the image has finished loading. Only then will you draw it to the canvas:

var img = new Image();             //create image object
img.onload = function(){           //create our handler
  context.drawImage(img, 32, 32);  //when image finishes loading, draw it
}
img.src = "example.png";           //load 'em up!

answered Apr 15, 2013 at 1:09

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Al Baghdadi Over a year ago

I Must Admit it This answer really saves me even thought this question not really related to my problem thanks

bfavaretto · Accepted Answer · 2013-04-15 01:10:43Z

1

You can only draw the image to canvas after it's loaded, that's why it works when you do it from the onload callback. And it works with setInterval because, after a certain amount of time, it eventually gets fully loaded.

answered Apr 15, 2013 at 1:10

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Comments

Brendon John Wildbore · Accepted Answer · 2013-04-15 01:10:07Z

0

I believe its because loading an image is not instant, it takes time. Once the image is loaded, then it can be drawn to the canvas

answered Apr 15, 2013 at 1:10

Brendon John Wildbore

6003 silver badges9 bronze badges

Comments

Mimo · Accepted Answer · 2013-04-15 01:12:55Z

0

This is needed because the browser needs to "read" and eventually download the image (onload event) to correctly handle the image load. Using a setInterval to simulate this behaviour could not work, for example loading of a large image on a slow connection... So the best way to do this is:

var img = new Image():
img.src = "image.jpeg";
img.onload = function() {
    // Now you can play with your image.
}

answered Apr 15, 2013 at 1:12

Mimo

6,0957 gold badges38 silver badges46 bronze badges

Collectives™ on Stack Overflow

Using drawImage in HTML5

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related