Canvas绘制1像素偏移求助：缩放后正方形边角错位的原因与解决方法

在64x64的Canvas上绘制16x16像素的正方形，通过CSS缩放Canvas后，正方形右侧边角出现错位。使用的CSS属性为image-rendering: pixelated和image-rendering: crisp-edges，运行环境为Windows系统下的Google Chrome浏览器。

相关代码 #

HTML #

<body>
    <canvas id="myCanvas" width="64" height="64"></canvas>
</body>

CSS #

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

canvas {
  width: 100vmin;
  height: 100vmin;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

JavaScript #

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

ctx.fillStyle = "rgba(0, 0, 0, 0.7)"
ctx.fillRect(0, 0, canvas.width, canvas.height)

function drawSquare(positionY, positionX) {
    ctx.fillStyle = "green";
    ctx.fillRect(positionX * 16, positionY * 16, 16, 16);
}

drawSquare(1, 1)
drawSquare(2, 1)

解决方法 #

1. 关闭Canvas自身图像平滑 #

即使CSS设置了像素化渲染，Canvas上下文默认的图像平滑仍可能干扰渲染，需手动关闭：

const ctx = canvas.getContext('2d')
ctx.imageSmoothingEnabled = false; // 添加此行

2. 强制整数倍缩放 #

当Canvas的CSS显示尺寸不是原始尺寸（64x64）的整数倍时，Chrome的像素化渲染易出现错位。通过JS动态计算并设置整数倍缩放：

const canvas = document.getElementById('myCanvas');
const maxSize = Math.min(window.innerWidth, window.innerHeight);
const scale = Math.floor(maxSize / 64);
canvas.style.width = `${64 * scale}px`;
canvas.style.height = `${64 * scale}px`;

3. 调整CSS属性优先级 #

pixelated是更现代的标准属性，将其放在crisp-edges之后，确保Chrome优先使用：

canvas {
  /* 其他属性 */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

4. 修正亚像素定位问题 #

Flex布局可能导致Canvas处于亚像素位置，添加以下CSS触发硬件加速以修正渲染：

canvas {
  /* 其他属性 */
  position: relative;
  transform: translateZ(0);
}

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