为何使用devicePixelRatio后Canvas背景尺寸超出预期？

核心原因 #

你的Canvas红色背景显示为10×10px，本质是Canvas的CSS显示尺寸设置未生效，浏览器默认采用了绘图缓冲区的尺寸（width/height属性值）作为元素的显示尺寸。

Canvas有两个独立的尺寸属性：

• 绘图缓冲区尺寸：由canvas.width和canvas.height控制，是实际绘制像素的画布大小（你设置的10px×10px）。
• 显示尺寸：由CSS的width和height控制，是Canvas元素在页面上的占位大小（你想要的5px×5px）。

当CSS显示尺寸未正确生效时，浏览器会默认将绘图缓冲区的尺寸直接作为显示尺寸，导致Canvas元素在页面上显示为10×10px，红色背景自然也跟着变成这个大小。而你画的1×1黑色点符合要求，是因为此时绘图缓冲区和显示尺寸1:1对应，1个缓冲区像素直接显示为1个页面像素，刚好匹配你要的1×1点效果。

常见触发场景 #

• CSS规则优先级冲突：如果外部样式表或全局CSS中存在针对Canvas的宽高设置（比如canvas { width: auto; height: auto; }），会覆盖你通过JS设置的内联style属性。
• 代码书写错误：误将CSS宽高设置写成了canvas.width = '5px'（这只会修改绘图缓冲区尺寸，浏览器会自动解析为数字5），而非正确的canvas.style.width = '5px'。
• 未明确设置CSS宽高：仅设置了绘图缓冲区尺寸，未指定CSS显示尺寸，浏览器会默认沿用绘图缓冲区的尺寸作为显示大小。

解决方法 #

1. 确保正确设置CSS显示尺寸：

   const canvas = document.getElementById('yourCanvas');
   const dpr = window.devicePixelRatio;
   // 设置页面显示尺寸（占位大小）
   canvas.style.width = '5px';
   canvas.style.height = '5px';
   // 设置绘图缓冲区尺寸（适配高DPI屏幕）
   canvas.width = 5 * dpr;
   canvas.height = 5 * dpr;
   

2. 使用内联样式提高优先级：直接在HTML标签中设置样式，避免被其他CSS规则覆盖：

   <canvas id="yourCanvas" style="width:5px; height:5px;"></canvas>
   

3. 检查计算样式：通过浏览器开发者工具（F12）查看Canvas元素的计算样式，确认width和height是否为你预期的5px，排查是否有其他CSS规则干扰。

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