canvas:你会设置它的绘图尺寸和显示尺寸吗?

canvas绘图尺寸莫名其妙的缩放，让我困惑很久的问题

我一定要弄明白为什么？

本文会告诉你，canvas有两个尺寸，绘图尺寸和显示尺寸

背景

请先仔细看看这个图片，彩色部分和黑色部分，图片缩放了

上面图片整体大小： 192×108

我本来希望通过drawImage我将一个图片1920×1080，缩小到：192×108

代码如下：

this.width=192；this.height=108； 
canvas.drawImage(img,0,0,this.width,this.height);

而且我的canvas 样式：

这个并不是我要的，图片显然缺少一大块
我期望的样子：


为什么呢？ 两个尺寸问题
原因：元素大小与绘图区域大小不一致的问题
可以通过一下代码你可以看出来
//绘画区域
console.log(canvas.width + "---" +canvas.height)
// 300---150
//元素区域
var box = 
canvas.getBoundingClientRect(); //canvas元素的边界框
console.log(box.width + "---" + box.height); /
 //192---108

这个俩个值不一致，导致了图片的自动缩放，这个自动也导致了我的困惑；
我查询了canvas相关资料：300---150 这个是默认值，我的老天

进一步理解这些内容？
 1、canvas元素指html中用css设置的尺寸，用于界面显示
 2、绘图区域尺寸需要在js中设置，用于画图；
 3、如果这个两个值一致，那么图片不会自动缩放了，你画多少显示就是多少大了；

解决的思路和方法
1、不要用css去设置他们的样式，采用js直接设置canvas的大小；（方案1：实际上基本采用这个方式）
2、绘图时候目标绘图大小进行转换，抵消自动缩放带来的后果 （方案2）

方案1：讨论

将原来的： ：讨论
自动缩放规律
结果尺寸 = 绘画尺寸（canvas元素/ 绘图表面）
如果要保证自动缩放后还是你期望的结果，那么就采用下面绘图公式（方案二）

那么： 实际绘画尺寸 = 绘画尺寸（绘图表面 / canvas元素）
我实际项目做法：
this.$el 是一个canvas对象
 //显示尺寸
 this.$el.style.width = width + 'px';
 this.$el.style.height = this.height + 'px';
 //绘图尺寸=画布尺 这两个值一定是要一样的
 this.$el.width = width;//注意没有尺寸单位
 this.$el.height = this.height;//注意没有尺寸单位
总结：
canvas 有两个尺寸： 显示区域尺寸和绘图尺寸，请确保他们一样；