为何在Canvas中使用context.scale()？DPR适配疑问

我在用canvas绘图时遇到了图像模糊的问题，已经找到修复办法，但对context.scale(dpr, dpr)的作用一直搞不懂。我猜测这个方法是把CSS像素转换为物理像素以匹配设备的dpr值，但我的显示器dpr为2，按理说CSS像素会自动适配成物理像素，为啥大部分模糊修复代码都要加这行？

相关代码示例 #

JavaScript 代码

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const dpr = window.devicePixelRatio

canvas.style.width = "300px";
canvas.style.height = "400px";


canvas.width = dpr * 300;
canvas.height = dpr * 400;

// ctx.scale(dpr, dpr); // 这行真的没必要吗？
ctx.strokeRect(100, 100, 150, 150);

HTML 代码

<canvas id="screen"></canvas>

为啥必须加 ctx.scale(dpr, dpr)？ #

• 画布尺寸与坐标系统不匹配：你把canvas.width/height设为dpr*CSS尺寸，是让画布拥有足够多的物理像素点，但绘图上下文默认的坐标系统还是以CSS像素为单位。比如dpr=2时，画布实际是600x800像素，但你用strokeRect(100,100,150,150)绘制的话，这个坐标是基于300x400的逻辑尺寸，相当于把100-250的逻辑区间拉伸到200-500的物理像素区间，拉伸过程就会导致边缘模糊。
• scale 帮你做坐标映射：调用ctx.scale(dpr, dpr)后，绘图上下文的坐标系统会被放大dpr倍。此时你用CSS像素的数值（比如100）绘图，上下文会自动把它转换成100*dpr的物理像素坐标，绘制出的图形会精准对应到物理像素点上，完全避免拉伸模糊。
• CSS适配不覆盖内部绘图逻辑：CSS的自动适配只负责把canvas元素的显示尺寸映射到物理屏幕，但canvas内部的绘图坐标是独立的。如果不调整上下文的坐标缩放，你相当于在一张大画布上用小坐标绘图，最后放大显示自然会模糊。

内容的提问来源于stack exchange，提问作者ybybyb