Game Development Reference
In-Depth Information
The HTML5 logo drawn inside a canvas rendering context.
A very important observation is that if the browser has not yet finished downloading
the image resource from the server by the time the call is made to
drawImage
, the
canvas will simply not draw anything, since the image passed to be drawn onto it has
not loaded yet. In the case where we draw the same image onto the canvas mul-
tiple times per second using a game loop of some sort, this is not really a problem,
because whenever the image finally loads, the next pass through the game loop will
successfully draw the image. However, in cases where the call to draw the image
is only done once (as in the example above), we only get one chance to draw the
image. Thus, it is very important that we don't make that call until the image is in fact
loaded into memory, and ready to be drawn into the canvas.
In order to ensure that the call to draw the image into the canvas only happens after
the image has been fully downloaded from the server, we can simply register a call-
back function on the load event of the image. This way, as soon as the image is done
downloading, the browser can fire that callback, and the call can finally be made to
draw the image. This way, we can be sure that the image will indeed be ready by the
time we want to have it rendered in the canvas.
