无法使用Html画布填充Rectanle的背景

Question

我正在尝试使用Javascript填充我在画布上绘制的矩形。然而，当我尝试使用下面的代码时，我的矩形甚至没有渲染，没有错误消息，我不确定我做错了什么。建议？

  ctx.beginPath();
    ctx.rect(150, 0, 3, 75);
    var img = new Image();
    img.src = window.location.host + "/wp-content/plugins/productdesigner/assets/Cords/T-911 Neon Orange.jpg";
    img.onload = function() {
      var pattern = ctx.createPattern(this,"repeat");
      ctx.fillStyle = pattern;
      ctx.fill();
    };
  ctx.closePath();