按下按钮在画布上绘制多个图像

Question

我试图了解如何通过按下按钮在画布上绘制多个图像。我不明白为什么它什么也没显示这是代码

// functions
function preLoad(context){
  var imageNames = ["image/image1.jpg","image/image2.jpg","image/image3.jpg",
               "image/image4.jpg","image/image5.jpg","image/image6.jpg",
               "image/image7.jpg","image/image8.jpg","image/image9.jpg",
               "image/image10.jpg"];

  for(var i = 0; i<imageNames.length; i++){
    image[i] = new Image();
    image[i].src = preload[i]
  }
}

function draw(){
  var coorX = 30;
  var coorY = HEIGHT / 2;
  for(var i = 0; i < 5; i++){
    context.drawImage(images[i], coorX + i*300, coorY);
  }
}

/* main program*/
// variables
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
const WIDTH = canvas.width;
const HEIGHT = canvas.height;

// buttons
var button = document.getElementById("button");
var image = [];

button.addEventListener("click", draw);

// start
preLoad(context);