设置Canvas透明背景时触发appendChild参数非Node类型报错如何解决

• getElementsByTagName 返回值是包含所有匹配标签的HTMLCollection类数组集合，不是单个DOM节点。哪怕页面只有一个<canvas>，返回值也不是Node类型，直接传入appendChild就会触发你看到的类型错误。
• 你将<canvas>HTML标签写在了Javascript代码块中，JS引擎不会解析这段标签为DOM元素，代码执行时既拿不到已有的canvas节点，也没有主动创建canvas节点，传入appendChild的参数本身就是无效值。
• 补充说明：canvas元素默认自带透明背景，不需要额外设置任何背景属性，就可以直接透出下层叠放的页面元素，不需要额外调用API实现透明效果。

你可以选任意一种符合你业务场景的写法：

方式1：HTML预定义canvas标签 #

把canvas标签直接写在HTML文件的body结构中，不要放到JS代码块里：

<canvas width="1500" height="800" style="width: 1500px; height: 800px;"></canvas>

JS部分只做元素获取和上下文初始化，不需要再执行appendChild操作：

// 取第一个匹配的canvas元素，也可以给canvas加id用getElementById获取更精准
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 后续正常写绘图逻辑即可，下层元素会自动透过canvas透明区域显示

方式2：JS动态创建canvas元素 #

如果需要通过JS动态生成canvas，要显式调用createElement创建节点，再设置属性、挂载：

// 创建真实的canvas DOM节点
const canvas = document.createElement('canvas');
// 设置画布实际像素分辨率
canvas.width = 1500;
canvas.height = 800;
// 设置页面显示尺寸
canvas.style.width = '1500px';
canvas.style.height = '800px';
// 挂载到body下
document.body.appendChild(canvas);
// 获取绘图上下文
const ctx = canvas.getContext('2d');

注意：不要只通过CSS设置canvas宽高。CSS控制的是canvas在页面上的拉伸显示尺寸，标签/JS对象上的width、height属性才是画布的实际像素分辨率，缺省值为300*150，只设CSS会导致绘图内容模糊变形。

内容的提问来源于stack exchange，提问作者Diced Mango