Condition for viewing HTML5 Image.onload in Internet Explorer 9

Question

I found similar time issues related to IE 9 and drew images using HTML5 cnavases, which were discussed in stackoverflow but not exactly the same as mine.

I encountered such a problem that the image loading function is periodically called, but it is not yet ready for drawing on canvas. (The canvas remains blank). Inside onload, the "complete" property of an image is always true, and the "width" and "height" properties always contain the expected values. No exceptions are thrown. If I put a slight delay on loading before drawing the image onto the canvas, I never get an empty draw. I can also bind another attempt to draw an image on an event, like a mouse click, and this is always successful. I do not observe this in Chrome or Firefox. I appreciate any ideas. Thanks!

var canvas = document.createElement('canvas'); canvas.width = 640; canvas.height = 480; var context = canvas.getContext("2d"); var image = new Image(); image.onload = function() { // this.complete always true here // A delay here seems to guarantee the draw will succeed context.drawImage(this, 0, 0); // Half the time canvas remains blank after draw // If the canvas is still blank, a later call to context.drawImage with this image will succeed } image.src = "some.png"; 

Answer 1

I don’t see where you add the canvas to the body - is it intentional?

Anyway, try putting createElement inside onload

Does that make things consistently good?

  var canvas; var context; var image = new Image(); image.onload = function() { canvas = document.createElement('canvas'); canvas.width = 640; canvas.height = 480; document.body.appendChild(canvas); context = canvas.getContext("2d"); context.drawImage(this, 0, 0); // Half the time canvas remains blank after draw } image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-qc-640-480-6.jpg";