HTML5 Canvas转换（0.5,0.5）不修复线条模糊

Question

阅读related articles，我尝试以像素为单位强制画布大小，指定路径的半像素以及context.translate（0.5）但我的画布线仍然模糊。

See Codepen.

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

Retina＆amp; HiDPI设备

查看您提供的图像。画布的分辨率是显示屏的一半。放大并查看“X”上的像素，DOM线是1px，但仍然是该字母上像素的两倍宽。这意味着画布正在拉伸，模糊是由于双线性过滤。您可以在选项卡上缩小，也可以使用视网膜或HiDPI显示屏。设置front-page.php＆amp; canvas.width增加两倍，设置canvas.height＆amp; canvas.style.width到DOM像素。移除canvas.style.height并添加ctx.translate，所有内容都将清除。

放大图片