How to place an image behind other drawings on Canvas?

Question

I am using Canvas in HTML5. I load some images and then would like to draw some lines and such on top of them.

But the images are always positioned on top, regardless of the order in which I execute these commands. Is there a way to force them to be drawn on top?

Answer 1

You have to draw everything after the image loads

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);   
    // then draw other stuff 
    ctx.fillRect(50,50,150,150);
}
img.src = 'http://placekitten.com/500/500';

Live example:

http://jsfiddle.net/XkYN7/