Javascript HTML5画布-绘制的线条在瞬间消失

我有两张画布，一张叠在另一张上

<div class="center">
  <canvas id="imgcanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>
  <canvas id="drawcanvas" style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>
</div>

函数的作用是：获取直线的坐标。我在示例画布上使用相同的代码，单击画布（而不是单击图像）绘制线条。然而，在这个应用程序中，这些线被画出来（我可以看到几秒钟），然后消失

试验1：

我在单击缩略图时调用了两个函数——clickedImage（）和drawAnnotations（）。我将所有与绘制线条有关的代码移到drawAnnotations（）中。这不起作用

试验2：

我在第一个函数中调用了缩略图的mousedown事件上的clickedImage（）和缩略图的mouseup事件上的drawAnnotations（）。这也不起作用

试验3：

我创建了一个window.addEventListener…并调用了drawAnnotation函数onload

window.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('drawcanvas').addEventListener("load", drawAnnotations);
});

---

这也不起作用…意思是…它画了线…但在一瞬间消失。

您可以在jsfiddle.com上发布示例吗？将画布宽度设置为高度将清除它（并重置其所有上下文属性）。您正在映像加载处理程序中执行此操作。因此，在设置尺寸后移动图形操作，您应该good@Kaiido谢谢你……我尝试了一些事情，但没有取得多大成功……我已经用尝试编辑了我的问题……你能帮助我在设置尺寸后如何移动绘图操作吗？@kaido谢谢你的指导……你的提示很有帮助。我有两个处理程序来重置画布的宽度和高度-缩略图onclick和窗口onload-当我禁用窗口onload上的resize和保留缩略图onclick并将代码移到pic.onload中时，一切正常。我可以接受你的评论作为回答。

window.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('drawcanvas').addEventListener("load", drawAnnotations);
});