FabricJS延迟绘制？

Question

我有一个我设置的小演示。

var image1 = "http://i.imgur.com/b81Wj6O.png";
var image2 = "http://i.imgur.com/vmtt98e.jpg";
var backgroundImage;
var toggle = true;

document.getElementById("button").addEventListener("click", update);

var canvas = new fabric.StaticCanvas('canvas', {
  width: 800,
  height: 600
});

function update() {
    var background;
    if (toggle) {
      background = image1;
    } else {
      background = image2;
    }
    toggle = !toggle;
    if(backgroundImage == null) {
      fabric.Image.fromURL(background, function(img){
      backgroundImage = img;
      canvas.add(img);
    });
  }
  else {
    backgroundImage.setSrc(background);
  }
  canvas.renderAll();
}

https://jsfiddle.net/rhLa38dt/

如果你点击按钮，它应该会绘制一个图像，我遇到的问题是，当你第二次点击按钮时，图像不会更新。然而，第三次它将绘制图像，它应该有第二次，并继续从那里总是落后一步。

Answer 1

设置画布的来源后，使用回调渲染画布：

backgroundImage.setSrc(background, function() {
  canvas.renderAll();
});

更新了工作JSFiddle，https://jsfiddle.net/rekrah/nzgf1ja4/。