Javascript 不能导出空白PNG/污染画布（不使用图像）

我正在尝试将一个相当简单的html导出到画布，然后再导出png。为此，我使用了rasterizeHTML（）。 我面临的问题是，我收到了一个警告，就像我正在加载一个外部图像/资源，但我没有。 这就是我尝试过的：

HTML:

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript

var canvas=document.getElementById("rasterizer");
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">            </div>            <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>        </div></div>',canvas);
canvas.toDataURL("image/png");

var canvas=document.getElementById（“光栅化器”）；
drawHTML（“”，画布）；
canvas.toDataURL（“image/png”）；

html只呈现两个圆圈，一个在另一个上面。光栅化器能够在画布中毫无问题地显示这一点，但当我尝试运行时。toDataURL最终会出现以下两个问题之一：

与画布大小相同的空白图像（如果是第一次运行代码）

SecurityError:未能对“HtmlCanvaElement”执行“toDataURL”：可能无法导出受污染的画布

我没有主意了，因为这应该通过外部资源实现，而不是完全内联的html。

---

有人知道为什么会这样吗？谢谢

这里有两件事在起作用：

您应该等待

rasterizeHTML.drawHTML

完成，然后才能从画布中看到任何内容：

rasterizeHTML.drawHTML('<div...', canvas, function () {
    var dataUrl = canvas.toDataURL("image/png");
    console.log(dataUrl);
});

rasterizeHTML.drawHTML（'一个试图在回调中使用它的小提琴手：谢谢，我不知道这个bug。这不是关于加载时间的困难，因为我已经手动尝试过了（在svg加载之后选择画布，然后尝试导出它）.我也试过使用draw回调，同样的问题。谢谢，接受这个答案。