当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。
所以当我们给 canvas 设置宽高时需要注意，比例需要时 2:1
canvas html 属性和 css 属性
理论上 canvas 的 width 和 height 都只能是整数，但实际上可以设置小数，浏览器默认会进行取整操作；也可以是带 px 的字符串，但是对于其它单位都会被忽略，渲染为 px；如果设置为负数或者不设置，默认宽是 300，高是 150
为什么<canvas>元素默认尺寸是 300 150，而不是其他尺寸组合呢？这个是 CSS 规范中定义的，作为替换元素，默认的尺寸是 300 150，<canvas>元素就是替换元素，因此默认尺寸是 300 150。由于<svg>元素也是替换元素，因此，<svg>默认的尺寸也是 300 150。
如果没有设置宽高属性，获取是取到的值是默认值
CSS 的 width，height 属性权重要大于<canvas>元素的 width，height 属性权重。
<canvas>的等比例特性是强制的，会忽略 HTML 属性的设置。对比下面的测试 HTML：
最终的宽度表现不是 300 而是等比例缩放的 176px。
1：Canvas 默认的画布宽高是 300 * 150，当你设置标签的 width，height 属性值时，控制的是 Canvas 的元素本身的宽高，和 Canvas 画布的宽高大小。同时设置定了两个值。
2：而 Css 设置 width，height 时，只仅仅控制了 Canvas 元素自身的宽高，而不会改变 Canvas 画布大小。
而我们最终展示在页面上的内容是 canvas 画布的内容，然后缩放到 css 值大小
比如我们设置了 css
此时 canvas 元素的大小是 600px * 300px ；但是画布大小还是 300px * 150px
所以还是会先在 300px * 150px 上的画布上先绘制，然后在拉伸绘画后的内容到我们 css 大小
此时我们获取 canvas 对象的 width 和 height 依旧还是 300px * 150px (而我们绘制图案是也是基于画布大小来说的默认画布的左上角是 0，0)
当我们使用各个 Canvas API 进行图形图像绘制的时候，其坐标位置，尺寸大小等都是相对于<canvas>元素的 HTML 属性 width/height，与 CSS width/height 没有任何关系。
<canvas>元素本质上是个位图，因此，在 retina 高密度屏幕下，如果如果绘制图像，则如果按照视觉尺寸来绘制，可能就会模糊，我们可以将<canvas>元素的尺寸用 HTML 高宽属性设置为 2 倍尺寸，然后使用 CSS 高宽属性设置视觉尺寸为布局需要的尺寸大小。
如果此时我在canvas上画一个圆，但是在浏览器上看到的效果却是个扁平的圆。为什么？
canvas就像一张图片，如上面的例子就是一张300*300的图片，当你通过css设置宽度和高度时，就相当于你对一个图片进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。
因为通过css设置宽高只相当于对canvas进行缩放操作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。
举个栗子：
刷新浏览器，正圆又回来了，大功告成~
可以看出fillText实心文字先绘制，strokeText空心文字后绘制，他们坐标一致，所以直接覆盖可实心文字，形成了像文字内部描边通过text-shadow添加文字阴影可以形成对文字的外描边
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
可以看下这个文章，关于text-shadow
https://www.cnblogs.com/wuchuanlong/p/5985350.html
