How to place an image behind other drawings on Canvas?

I am using Canvas in HTML5. I load some images a开发者_Python百科nd 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?

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/