1：通过标签创建
<canvas id="cc" width="960" height="640"></canvas>

2：通过 js 创建
let canvas = document.createElement("canvas");
canvas.width = 960;
canvas.height = 640;
document.body.appendChild(canvas);

两种创建效果是一样的

canvas.id = "cc";

给画布添加 css 的方法
<canvas id="cc" width="960" height="640" style="position: absolute;display: block;background-color: bisque;"></canvas>

也可以用 id 选择器（效果是一样的）
<style> #cc { position: absolute; display: block; background-color: bisque; z-index: 0; }</style>

position 属性指定了元素的定位类型
有意自己去看api说明：https://www.runoob.com/css/css-positioning.html

display 属性设置一个元素应如何显示
有意自己去看api说明：https://www.runoob.com/css/css-display-visibility.html

background-color 属性定义了元素的背景颜色.
有意自己去看api说明：https://www.runoob.com/css/css-background.html

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
有意自己去看api说明：https://www.runoob.com/css/css-overflow.html

z-index属性是一个非常重要的属性，它用于控制元素在页面上的重叠顺序
就是我们 flash 以前的 深度层级遮挡关系的意思