如何解决HTML Canvas路径拐角的抗锯齿问题？

问题现象 #

使用HTML Canvas绘制90度角路径时，拐角存在抗锯齿问题，拐角像素无法呈现纯黑色。

复现代码 #

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="550" style="width: 480px; height: 440px;"></canvas>

<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(200.5, 20.5);
ctx.lineTo(200.5, 100.5);
ctx.lineTo(20.5, 100.5);
ctx.stroke();
</script>

</body>
</html>

已尝试的方法及缺陷 #

• 将路径拆分为两条略微过冲拐角的独立线段：能正常渲染拐角，但无法填充（填充要求连续路径）
• 先过冲拐角再折返：形成连续路径且拐角正常，但透明描边时重叠部分会明显可见
• 默认已设置lineJoin = "miter"，但该功能未正常生效

可行解决方案 #

方案1：关闭全局抗锯齿 #

直接禁用Canvas的图像平滑（抗锯齿）功能，适合不需要边缘平滑的场景：

// 兼容不同浏览器
ctx.imageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(200.5, 20.5);
ctx.lineTo(200.5, 100.5);
ctx.lineTo(20.5, 100.5);
ctx.stroke();

关闭抗锯齿后，所有线条都会对齐像素边界，拐角处直接呈现纯黑色像素。

方案2：整数坐标+square类型lineJoin #

将路径坐标改为整数，同时设置lineJoin为square：

ctx.lineWidth = 1;
ctx.lineJoin = 'square'; // 让拐角延伸线条宽度的一半，填满像素

ctx.beginPath();
ctx.moveTo(201, 21);
ctx.lineTo(201, 101);
ctx.lineTo(21, 101);
ctx.stroke();

原理：1px宽度的线条在整数坐标下会对齐像素网格，square类型的拐角延伸刚好填补像素间隙，避免抗锯齿模糊。

方案3：单独填充拐角像素 #

如果需要保留其他区域的抗锯齿，仅修复拐角问题，可以先填充拐角处的像素：

// 先填充拐角的1px正方形
ctx.fillRect(200.5, 100.5, 1, 1);

// 再绘制原路径
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(200.5, 20.5);
ctx.lineTo(200.5, 100.5);
ctx.lineTo(20.5, 100.5);
ctx.stroke();

这种方法精准修复拐角，不影响其他部分的平滑效果。

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