如何解决 canvas 设置宽度和高度后绘制圆形变成椭圆且定位偏移的问题

不要使用 CSS 方式设置 canvas 的宽高，应使用属性来设置其尺寸。

直接设置属性：

<canvas id="canvas" width="400" height="300"></canvas>

因属性值是以 px 为单位的，如果项目全程使用 rem 等其它尺寸单位，可通过 JS 来设置

var canvas = document.getElementById('canvas');
coatingW = $('#coating_frame').width();
coatingH = $('#coating_frame').height();
canvas.width = coatingW;
canvas.height = coatingH;