html5 怎么在canvas上 绘制多张图片

var width = document.body.clientWidth;
var height = document.body.scrollHeight;
var gameCanvas = document.getElementById("gameCanvas");
gameCanvas.height = height;
gameCanvas.width = width;
var ctx = gameCanvas.getContext("2d");
for (var i = 1; i <= totalHeadPics; i++) {
var randomWidth = 0;
while (randomWidth <= 0) {
randomWidth = parseInt(width * Math.random());
}
var randomHeight = 0;
while (randomHeight <= 0) {
randomHeight = parseInt(height * Math.random());
}
var img = new Image();
img.src = 'img/' + headPicMap[i - 1];
img.onload = function() {
ctx.drawImage(img, randomWidth, randomHeight, 50, 65);
ctx.save();
}
}

我这样绘制出来后，还是只有一张图！

相关了解……