如何在Canvas上将图像放在其他图形后面？

Question

我在HTML5中使用Canvas。我加载一些图像，然后想在它们上面绘制一些线条。

但无论执行这些命令的顺序如何，图像始终位于顶部。有没有办法迫使它们被吸引到最顶层？

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/