在javascript中在画布上绘制图像数组

Question

我想在画布上绘制一系列图像。这是我没有数组的代码：

var monsterReady1 = false;
var monsterImage1 = new Image();
monsterImage1.onload = function () {
    monsterReady1 = true;
};
monsterImage1.src = "fruit1.png";

var monster1 = {x: 0, y: 0};

var monsterXY1 = function () {
    monster1.x = (Math.random() * (canvas.width - 50));
    monster1.y = (Math.random() * (canvas.height - 50));
};

var render = function()
{
    if (monsterReady1) {
        ctx.drawImage(monsterImage1, monster1.x, monster1.y);
    }
};

这是我尝试使用数组的代码，但它不起作用：

var fruits = ["fruit1.png", "fruit2.png", "fruit3.png", "fruit4.png"];

for (var i = 1; i <= fruits.length; i++) {
    var monsterReady1 = false;
    var monsterImage1 = new Image();
    monsterImage1.onload = function () {
        monsterReady1 = true;
    };
    monsterImage1.src = fruits[i];
}