Canvas Can'；t使用重复模式使图像在画布上重复

我正在尝试使用我自己创建的图形在画布上创建一个简单的重复图像。不幸的是，createPattern（img，repeat）只会导致图像的一个版本被重复。我尝试将其保存为图像，然后使用img.src加载该图像，我还尝试创建第二个画布，并尝试使用第一个画布作为模式的基础来绘制该画布，但两者都产生了相同的结果-只是图像的一个版本。我错过了什么

以下是我的代码的两个版本：

使用两张画布：

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

  var pattern = ctx2.createPattern(canvas, 'repeat');
  ctx2.fillStyle = pattern;
  ctx.fillRect(0, 0, 2480, 3508);
}

使用单独的图像：

function draw() {

  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 2480, 3508);


  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

}

---

谢谢你的帮助

我做了一些调整，并使用“从画布绘制”选项使其正常工作。正如建议的那样，我将逻辑移到了load语句中。我还提到createPattern中的canvas，它是第二个画布的id，而不是我给第一个画布（drawcanvas）的id，这意味着我基本上是在空白画布上绘制空白画布。这是我的更新代码

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.src = 'Images/wine-icon-15966.png';
    img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200);
    var pattern = ctx2.createPattern(drawcanvas, 'repeat');
    ctx2.fillStyle = pattern;
    ctx2.fillRect(0, 0, canvas.width, canvas.height);
    ctx2.fill();

  }, false);

  ctx2.fillStyle = '#f5f2d0';
  ctx2.fillRect(0, 0, canvas.width, canvas.height);
}

---

调用

ctx2.createPattern时的可能重复（canvas，

img

的

load

事件尚未激发。因此，您没有在

画布上绘制任何图像作为模式的源，即您正在从一个仍然透明的图像创建一个模式。请将所有逻辑移到这个load-偶数处理程序中。感谢您的回复，很遗憾，我仍然无法获取它工作-一半的图像消失了。但我会记住这一点继续工作。