添加新元素后HTML Canvas不显示内容的原因及解决办法

问题 #

我有一段可正常显示的HTML Canvas代码：

<canvas class="id-canvas" width="1025" height="600"> </canvas>

但当我通过以下代码（$ 为 querySelector）向页面添加新div后，Canvas内容完全消失：

$(".class-main")!.innerHTML += "<div class='class-chat' style='; color: white;'> Hi </div>";

新添加的“Hi”文本可正常显示，移除该添加代码后Canvas恢复显示，控制台无报错。这是什么原因？该如何解决？

原因分析 #

innerHTML += 的本质是把目标容器（.class-main）里的现有DOM节点全部转成HTML字符串，拼接上新内容后再重新解析成DOM节点替换原内容。这个过程中，原来的Canvas元素会被销毁，然后生成一个全新的空白Canvas——之前在Canvas上绘制的内容存在旧Canvas的上下文里，新Canvas没有这些绘制状态，所以看起来就消失了。

解决方法 #

方法一：用DOM API直接创建并添加元素（推荐） #

这种方式不会破坏原有DOM结构，完全不影响已有的Canvas：

// 创建新div元素
const chatDiv = document.createElement('div');
// 设置类名和样式
chatDiv.className = 'class-chat';
chatDiv.style.color = 'white';
// 设置文本内容
chatDiv.textContent = 'Hi';
// 添加到目标容器
document.querySelector('.class-main').appendChild(chatDiv);

方法二：重新执行Canvas绘制逻辑（不推荐） #

如果一定要用innerHTML +=的方式，需要在添加元素后重新调用Canvas的绘制函数，把内容重新画一遍。但这种方法会重建容器内所有DOM，性能较差，还可能丢失Canvas的临时状态，所以优先选方法一。

内容的提问来源于stack exchange，提问作者Cflowe Visit