"动态添加元素后 HTML 画布无法绘制"

Question

我正在尝试使用画布进行绘制，但一切都只工作片刻：在我将元素附加到作为我的canvas<\/code>的父级的 div ( #workbench<\/code> ) 之后，1. 绘图被删除 2. 使用此画布进行绘图的任何更多尝试不工作。

截图：用canvas绘制的测试图，绿色背景为canvas空间，粉色为网站背景<\/a>

这是JS代码：（调用一次）

var canvas1 = document.querySelector('#workbench_canvas');
var workplace = document.querySelector('#workbench');

console.log(canvas1);
if (!canvas1 || !canvas1.getContext) {
    console.error("ERROR");
}


canvas1.width       = workplace.offsetWidth;
canvas1.height      = workplace.offsetHeight;