隐藏在画布上的图像下的矩形

Question

基本上我想要的是在画布上绘制的图像，所以我可以稍后导出它。哪个已经有效了。
现在我想在图像上画一个矩形 但为什么我的矩形没有出现在我的<canvas>元素上？ 这是代码：

var canvas = document.querySelector('#poster');
var width = 476;
var height = 760;

$(document).ready(function() {
  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  drawText();
  changePicture();

  var createBtn = document.getElementById("make-poster");
  createBtn.addEventListener("click", exportPicture, false);
});

function changePicture() {
  var imageArray = ["img/poster_01.jpg","img/poster_02.jpg","img/poster_03.jpg","img/poster_04.jpg","img/poster_05.jpg"];
  var images = [];
  for (i = 0; i < imageArray.length; i++) {
      images[i] = new Image();
      images[i].src = imageArray[i];
  }

  images[0].onload = function() {
      canvas.getContext('2d').drawImage(images[0], 0, 0, width, height);
  }

  $("a.control").click(function(e){
    e.preventDefault();
    var imageId = $(this).attr("id") - 1;
    canvas.getContext('2d').drawImage(images[imageId], 0, 0, width, height);
  });

}

function exportPicture(){
  window.open(canvas.toDataURL(),"vlaanderenstoptmetroken","left=0,top=0,width=" + canvas.width + ",height=" + canvas.height + ",toolbar=0,resizable=0");
}

function drawText(){
}