Javascript SVG到画布图像工作时间的一半

我想在某个时候比较两个svg路径（用户和模型）。其想法是将它们转换为图像数据，以便能够进行像素比较。我的问题是使用drawImage，这会让我有一半的时间看到一张空画布

let modelnavas=document.createElement（“画布”）；
让modelContext=modelCanvas.getContext（“2d”）；
modelnavas.width=898；
modelnavas.height=509；
document.body.appendChild（modelCanvas）；
设modelImg=新图像（898509）；
modelImg.src='数据：image/svg+xml；碱基64，phn2zybgbgfzcz0ic3znlw[…]；
drawImage（modelimg0,0898509）；

代码非常简单，总是在运行时不会产生错误。静止的drawImage似乎失败了很多次

以下是JSFIDLE（带有完整的数据字符串）：

---

非常感谢您的帮助。

通过web浏览器加载图像是一种异步操作

当图像不能保证加载时，您正试图调用

modelContext.drawImage

必须将图形代码放在回调函数中

当图像加载完全完成时，此函数将被调用一次

let modelnavas=document.createElement（“画布”）；
让modelContext=modelCanvas.getContext（“2d”）；
modelnavas.width=40；
modelnavas.height=40；
document.body.appendChild（modelCanvas）；
设modelImg=newimage（）；
modelImg.src=https://i.stack.imgur.com/EK1my.png?s=48';
modelImg.onload=函数（）{
drawImage（modelimg0,0,40,40）；
}

Try

modelImg.onload=function（）{modelContext.drawImage（modelImg，0，0，898，509）；}

非常感谢，我一直在这里挣扎！然而，我并没有真正了解问题的根源：btoa方法似乎不是异步的：。您有关于此修复程序的额外信息吗？非常感谢。