（一） width/height 默认值与单位
Canvas 标签只有两个属性—— widthheight,作为一种替换元素，它默认大小为300×150像素。
canvas的单位只能是是px，值只能是整数。如果你设置为其他单位或者不设置，在渲染时，依旧按照像素单位显示。
如果数值设置称负数，或者 不设置，则按照 300×150像素显示（前提是 没有设置css，否则会有一些神奇的现象出现）。
（二）属性与CSS权重问题
<canvas style="background-color: #039be5; 300px" width="100px" ></canvas>
请试想下，这个canvas表现出 的宽度，高度是多少？
宽度是300px,因此，css的权重是 > HTML 属性权重。
渲染出的高度却不是默认150px，如下图所示：
渲染出的高度是450px,这是为什么呢？
MDN上有句话： 绘制时图像会伸缩以适应它的框架尺寸 。
也就是说： 这里会按照等比例缩放： 即 （300【css宽度】/100【width宽度】）*150（height默认高度） = 450 px （渲染高度） 。
canvas的等比特性是强制的，有时候就会造成绘制的图形会发生扭曲。
如下，我即设置样式中的 width与height，又单独设置了 HTML属性中的width，但是 300/100=3，而300/150=2，
所里两者比例不一致，我绘制的圆，便会出现扭曲。 因此，实际开发中，不要两者都设置。
<canvas style="background-color: #039be5; 300px; height: 300px;" width="100px" ></canvas>
let context=document.querySelector('canvas').getContext('2d');
context.fillStyle='red';
context.arc(60,65,35,0,2*Math.PI);
context.fill();
（三） Css 中width/height 与 HTML属性 widht/height 关系
试想下，当我们在css中设置了属性，并未设置 HTML属性时， 绘制图像时，它的坐标位置，尺寸大小是相对 我们在css中设置的宽度与高度吗？
<canvas style="background-color: #039be5; height: 300px;" ></canvas>
<script type="text/javascript">
let context=document.querySelector('canvas').getContext('2d');
context.fillStyle='red';
context.arc(150,75,75,0,2*Math.PI);
context.fill();
</script>
如上，我们设置一个高度为300px（宽度渲染为600px)的画布，然后在距离左顶点 150px,75px（也是圆心所在标记） 处绘制了一个圆，这个圆会居中吗？
如果按照真实的高度300px来计算，距离上边距75px显然是不可能居中的；合理的解释是，是按照默认的HTML height属性150px来进行了定位。
如果只设置HTML属性，同样的JS绘制，效果图如下。
<canvas style="background-color: #039be5; " height="300px" width="600px"></canvas>
因此，使用Canvas API进行图像绘制时，其坐标位置，尺寸大小都是按照 HTML属性来进行定位的。