如何使用HTML Canvas绘制清晰锐利的像素级完美线条

我查阅了大量相关资料，找到的解决方案要么已经过时，要么无法正常生效。
我需要创建尺寸为320 x 240像素的canvas，渲染带像素化效果的线条——即走样、每个像素都有清晰硬边缘的效果。当前运行环境window.devicePixelRatio返回值为1，且<canvas>元素的原生width/height属性值与CSS设置的width/height值完全一致。
下方是实际运行效果与预期效果对比：左侧为Windows系统Firefox浏览器、系统分辨率设为1360 x 768环境下的显示效果，右侧是绘图软件制作的预期理想效果样稿：

当前使用的三份文件代码如下：

JavaScript 代码（playground.js） #

let canvas = document.querySelector(".playground-canvas");
let ctx = canvas.getContext("2d");

ctx.fillRect(5, 5, 50, 50);

ctx.beginPath();
ctx.moveTo(4.5, 15.5);
ctx.lineTo(15.5, 220.5);
ctx.lineWidth = 0.5;
ctx.strokeStyle = "red";
ctx.stroke();

CSS 代码（playground.css） #

* {
  box-sizing: border-box;
}

body {
  background: #333;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.playground-container {
  position: relative;
  width: 320px;
  height: 240px;
  margin: 0 auto;
  outline: 1px solid #fff;
  transform: scale(2) translateY(30%);
}

.playground-container canvas {
  image-rendering: pixelated;
}

HTML 代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>The Ideal Playground</title>
    <link href="playground.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div class="playground-container">
      <canvas class="playground-canvas" width="320" height="240"></canvas>
    </div>

    <script src="playground.js"></script>
  </body>
</html>

我猜测在高DPI显示器普及的当下，HTML/CSS/JS可能无法稳定实现这类需求，希望能得到相关解决方案。

Canvas 2D API默认对所有路径渲染强制开启抗锯齿，目前没有官方API可以直接关闭该特性，以下两种方案可稳定实现硬边像素化线条效果，全浏览器兼容，不受设备DPR影响：

方案1：逐像素绘制（最稳定，100%匹配像素风效果） #

放弃原生lineTo路径绘制逻辑，直接通过fillRect逐像素填充，完全绕开浏览器的抗锯齿渲染逻辑。绘制直线可使用经典的布雷森汉姆直线算法，示例代码如下：

// 无抗锯齿像素直线绘制函数
function drawPixelLine(ctx, x1, y1, x2, y2, color) {
  ctx.fillStyle = color;
  const dx = Math.abs(x2 - x1);
  const dy = Math.abs(y2 - y1);
  const sx = x1 < x2 ? 1 : -1;
  const sy = y1 < y2 ? 1 : -1;
  let err = dx - dy;

  while (true) {
    // 直接填充单个物理像素，无任何抗锯齿
    ctx.fillRect(Math.round(x1), Math.round(y1), 1, 1);
    if (x1 === x2 && y1 === y2) break;
    const e2 = 2 * err;
    if (e2 > -dy) {
      err -= dy;
      x1 += sx;
    }
    if (e2 < dx) {
      err += dx;
      y1 += sy;
    }
  }
}

// 替换原有路径绘制逻辑
let canvas = document.querySelector(".playground-canvas");
let ctx = canvas.getContext("2d");
ctx.fillRect(5, 5, 50, 50);
drawPixelLine(ctx, 5, 16, 16, 221, "red");

该方案不依赖浏览器的渲染策略，不管设备DPR是多少、使用什么浏览器，渲染效果都和像素绘图软件的输出完全一致，是目前网页端像素类应用（像素游戏、复古模拟器等）的通用实现方案。

方案2：直接操作像素缓冲区 #

如果需要更高的绘制自由度，可以通过createImageData获取canvas的像素缓冲区，直接修改像素色值后一次性渲染回canvas，同样可以完全规避抗锯齿：

let canvas = document.querySelector(".playground-canvas");
let ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(320, 240);
const pixelData = imgData.data;

// 绘制黑色方块
for (let y = 5; y < 55; y++) {
  for (let x = 5; x < 55; x++) {
    const idx = (y * 320 + x) * 4;
    pixelData[idx] = 0;
    pixelData[idx+1] = 0;
    pixelData[idx+2] = 0;
    pixelData[idx+3] = 255;
  }
}
// 可复用布雷森汉姆算法逻辑，直接修改pixelData数组绘制红色直线
// ... 直线绘制逻辑省略

ctx.putImageData(imgData, 0, 0);

原有代码不生效的原因 #

1. 坐标加0.5偏移、设置0.5线宽的技巧，仅在1倍DPR环境下对水平/垂直的1px线条有硬边效果，对斜线完全无效——斜线的模糊是浏览器路径抗锯齿的默认行为，没有任何CSS属性可以关闭Canvas内部的路径抗锯齿。
2. 你设置的image-rendering: pixelated仅在canvas被CSS缩放时控制插值方式，对canvas内部的路径渲染逻辑没有任何影响。如果需要保证容器缩放2倍后依然是硬边效果，需要补全浏览器兼容前缀：

.playground-container canvas {
  image-rendering: -moz-crisp-edges; /* 兼容Firefox */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

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