Image readystate in canvas

Question

Is it possible to use imagename.readyState in canvas?

If not does anyone know a way of detecting when an image being drawn to the canvas using "drawImage" has loaded and is ready to display?

I am creating an image showcase using the canvas - when an image is selected I want to have a loading animation (which I have already created) display until the loaded condition is met.

I am still learning to use javascript and have been trying all day to no avail - so apologies for the lack of example code to display and illustrate what I'm asking!

Answer 1

You might try loading the image by using new Image() and setting the .onload event to draw the image on the canvas after the image has been loaded.

var img = new Image();
img.onload = function() {
    // code to draw image on the canvas...
}
img.src = "/path/to/img.jpg";

See also: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html