Canvas width、height属性
canvas的真实尺寸，默认值分别为300px、150px。
例
绘制图形时，使用的坐标，与 canvas 属性的宽高完全相同，左上点与右下点连接上
<canvas width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
ctx.moveTo(0,0)
ctx.lineTo(300,300)
// 绘制线
ctx.stroke();
</script>
css 的 width、height属性
使用 css 的 宽高属性，是对 canvas 的宽高属性 的 缩放，所以要搭配 canvas 的宽高属性，否则显示不正确
例
虽然下面代码设置 css 的宽高都是 200px ，但画线时，0,0 到 300,150，能够从左上角连接到右下角，说明：
- 如果没有设置 canvas 的宽高属性，那么就是
300宽、150高 - 绘图时的坐标，是基于 canvas 的宽高，css 的宽高只是 缩放比例 后，即：拉伸成
200px宽，200px高，渲染到浏览器上
<canvas style="border: 1px solid #ccc;width:200px; height:200px;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
ctx.moveTo(0,0)
ctx.lineTo(300,150)
// 绘制线
ctx.stroke();
</script>
例2
虽然下面代码设置 css 的宽高都是 200px ，但画线时，0,0 到 200,200，也 不能够 从左上角连接到右下角，说明：
- 如果没有设置 canvas 的宽高属性，那么就是
300宽、150高 - 绘图时的坐标，是基于 canvas 的宽高，css 的宽高只是 缩放比例 后，即：拉伸成
200px宽，200px高，渲染到浏览器上
<canvas id="canvas" style="width:200px; height:200px;">
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
最终显示结果，在画板（200X200）上渲染的图形：
总结
为了避免显示错误，保持canvas 宽高属性 和 css宽高 的 比例一致
参考：
https://segmentfault.com/a/1190000020189168