如何将外部库fabric.Canvas实例对象正确追加到div元素中

问题原因 #

fabric.Canvas 是fabric库封装的逻辑实例，不属于浏览器原生DOM节点，直接调用append/appendChild方法追加时，无法被识别为DOM元素，会被自动转为字符串输出，也就是你看到的#<fabric.Canvas (1): { objects: 1 }>文本内容。

解决方法 #

方案1：使用你自行创建的原生canvas元素 #

你初始化fabric实例时已经传入了自行创建的原生canvas DOM元素，直接将该原生DOM元素追加到目标div即可，不需要追加fabric实例对象。
修改对应代码行：

// 原错误代码
// editor.append(canv); //Where the problem lies
// 替换为
editor.appendChild(canvas);

方案2：使用fabric自动生成的包裹容器 #

fabric初始化交互画布时会生成上下两层canvas（下层负责绘制、上层负责交互），并默认包裹在一个div容器中，你可以直接追加该容器：

editor.appendChild(canv.wrapperEl);

修改完成后你仍然可以正常使用canv实例调用add、renderAll等fabric提供的API操作画布，不影响原有逻辑。

内容的提问来源于stack exchange，提问作者Hitman DD