Lesenverbunde Artike, Ich habe versucht, die Leinwandgröße in Pixeln zu erzwingen, halbe Pixel für die Pfade und auch context.translate (0.5) anzugeben, aber meine Leinwandlinien sind immer noch verschwommen.

Siehe 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();
};

Wo gehe ich falsch und wie kann ich meine Linien wie den Rand um die Kästchen in der Demo scharf machen?

Wie es für mich aussieht: