Canvas generates blurry images

Reference documents:
https://blog.csdn.net/qq_41887214/article/details/123173072
https://juejin.cn/post/6844903828916011022
https://www.jb51.net/html5/815034.html

Before solving this problem, you must understand the following background knowledge :
1. Some basic knowledge about the screen:

• physical pixel (DP)

Physical pixels are also called device pixels. We often hear the resolution of mobile phones as physical pixels. For example, the physical resolution of iPhone 7 is 750 * 1334. The screen is composed of pixels, that is to say, the screen has 750 pixels in the horizontal direction and 1334 pixels in the vertical direction.

• Device Independent Pixel (DIP)

Also called logical pixels, for example, the size of Iphone4 and Iphone3GS is 3.5 inches, the physical resolution of iphone4 is 640 * 980, and 3gs is only 320 * 480, if we draw an image with a width of 320px according to the real layout, in iphone4 Only half of the screen has content, and the remaining half is blank. In order to avoid this problem, we introduced logical pixels and set the logical pixels of both phones to 320px for easy drawing

• Device Pixel Ratio (DPR)

In the final analysis, the independent pixels of the device above are for the convenience of calculation. We unified the logical pixels of the device, but the physical pixels represented by each logical pixel are not determined. In order to determine the relationship between the physical pixel and the logical pixel in the unscaled condition , we introduce the concept of Device Pixel Ratio (DPR).
Device Pixel Ratio = Device Pixels / Logical Pixels

As can be seen from the above figure, under the same logical pixel size, the high-definition screen has more physical pixels. Under normal screens, 1 logical pixel corresponds to 1 physical pixel, while under the high-definition screen with dpr = 2, 1 logical pixel is composed of 4 physical pixels. This is why high-definition screens are more delicate.

2. Some basic knowledge about canvas

• Canvas draws bitmaps
• The width and height properties of canvas

canvas的width和height属性与style的width,height 不同。应注意区分：
<canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>
style中的width和height分别代表canvas这个元素在界面上所占据的宽高，即样式上的宽高
attribute中的width和height则代表canvas实际像素的宽高
也就是就是1个逻辑像素实际上由2个canvas像素填充。
例如: 示例一： canvas width="300" height="150" style="width: 300px; height: 150px" // 红色
示例二：canvas width="600" height="300" style="width: 300px; height: 150px" // 蓝色
也就项上述的图片展示一致  红色为普通屏  蓝色为高清屏；

The reason for the blurred picture:
The graphics drawn by canvas are bitmaps, that is, raster images or bitmap images. When they are rendered to high-definition screens, they will be enlarged, and each pixel will be rendered with the square physical pixels of devicePixelRatio. So the picture will be blurry.

Solution:
Enlarge devicePixelRatio times the width and height of the canvas, and then use css to shrink back to the ideal pixel you want

uniapp 解决问题实例：
1、 canvas 节点
<!-- 避免图片失真，获取设备像素比设置画布大小，css样式在设置内容块宽高 -->
<canvas canvas-id="mycanvas" :style="'width: '+popWidth*devicePixelRatio+'px;height: '+canvasHeight*devicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;position: fixed;opacity: 0;top: -'+canvasHeight+100+'px;'"></canvas>

2、获取设备像素比
uni.getSystemInfo({
    
    
    success(res) {
    
    
    	that.popWidth = res.windowWidth;
    	// 设备像素比大于1
    	if (res.devicePixelRatio > 1) {
    
    
    		that.devicePixelRatio = res.devicePixelRatio;
    	}
    }
});
3、绘制
let ctx = uni.createCanvasContext('mycanvas', this);  // 创建canvas对象
ctx.setFillStyle('#fff');
// 避免二维码失真，导致识别二维码失败；
// 获取设置像素比。绘制设备像素比相符的画布内容，在csstranform设置节点样式缩放，transform-origin基准设置为0，0；
// 这样获取到的画布图片内容就不会失真了。
ctx.fillRect(0, 0, that.popWidth*that.devicePixelRatio, that.canvasHeight*that.devicePixelRatio); // that.canvasHeight 为你设计图的画布高度；
.....