Как разместить изображение позади других рисунков на холсте?

Question

Я использую Canvas в HTML5.Я загружаю несколько изображений и затем хотел бы нарисовать несколько линий и тому подобное поверх них.

Но изображения всегда располагаются сверху, независимо от порядка выполнения этих команд.Есть ли способ заставить их нарисовать сверху?

Answer 1

Вы должны нарисовать все после загрузки изображения

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';

Пример в реальном времени:

http://jsfiddle.net/XkYN7/