Question

If I pass the reference to an image to drawImage API of HTML canvas, but the image is still loading, then what would happen? Will get an exception, or the API will go ahead with the partial data, or the API will block till the image is loaded?

Answer 1

The canvas spec dictates that nothing shall be drawn, even if it is 99% loaded. It does not throw an error.

So if you do:

var img = new Image();
img.src = 'http://placekitten.com/300/300';
// Might occur before the image is done loading (bad!)
ctx.drawImage(img, 0, 0);

This is why most people do something similar to:

var img = new Image();
img.onload = function() {
  // Will occur only once the image is done loading
  ctx.drawImage(img, 0, 0);
}
img.src = 'http://placekitten.com/300/300';

To ensure that the image will get drawn.