HTML5 Canvas translate(0.5,0.5) 不修复线条模糊

Question

阅读相关 文章，我尝试以像素为单位强制画布大小，为路径指定半像素以及 context.translate(0.5) 但我的画布线条仍然模糊。

见代码笔。

const ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);

/* Function to draw HTML5 canvas line */
const drawPath = (startX, startY, endX, endY) => {
  ctx.beginPath(); 
  ctx.lineWidth = "1";
  ctx.strokeStyle = "red"; 
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
};

我哪里出错了，如何让我的线条像演示中框周围的边框一样清晰？

它对我来说是如何出现的：

Answer 1

视网膜和 HiDPI 设备

查看您提供的图像。画布是显示器分辨率的一半。放大并查看“X”上的像素，DOM 线为 1 像素，但仍然是该字母像素的两倍宽。这意味着画布被拉伸，模糊是由于双线性过滤。要么缩小选项卡，要么使用视网膜或 HiDPI 显示屏。将canvas.width&设置canvas.height为两倍，将canvas.style.width&设置canvas.style.height为 DOM 像素。删除ctx.translate并添加ctx.scale(2,2)，所有事情都会清楚。

放大图像