Javascript CanvasRenderingContext2D drawImage（）在Chrome中无法正常工作

我目前正在开发一个web应用程序。作为其中的一部分，我在内部创建SVG图像。在渲染方面，我使用了本问题中提供的方法，以便将svg转换为位图并在画布上显示：

在大多数情况下，这可以正常工作，但是有时它不会呈现SVG图像。使用chrome DevTools，我能够确认传递给

drawImage（）

（在下面的示例中，这将是

imageBitmap

）的对象在每次调用中都是相同的，但有时渲染，有时不渲染。我完全不理解这种行为

var svgStr=”“；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var imageBitmap=新图像（）；
imageBitmap.src='数据：image/svg+xml；base64，“+window.btoa（svgStr）；
log（“绘图位图”）；
drawImage（图像位图，0,0）
您需要等待图像加载完成。为此，您可以使用图像的
.onload
处理程序，该处理程序在加载图像时被调用


var svgStr=”“；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var imageBitmap=新图像（）；
imageBitmap.src='数据：image/svg+xml；base64，“+window.btoa（svgStr）；
函数drawBitmap（）{
log（“绘图位图”）；
drawImage（图像位图，0,0）；
}
imageBitmap.onload=绘图位图
就是这样。我排除了这一点，因为我通过编程创建了SVG和位图，并且所有操作都是按顺序执行的。此外，DevTools还显示了有关位图对象的正确信息。你知道为什么还会发生这种情况吗？解析器可能仍然需要时间来创建一个图像的内部副本，它的格式将被呈现