html5 canvas 0.5,HTML5 Canvas translate(0.5,0.5) not fixing line bl

Reading related articles, I've tried forcing the canvas size in pixels, specifying half pixels for the paths and also context.translate(0.5) but my canvas lines are still blurry.

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

};

Where am I going wrong and how can I make my lines crisp like the border around the boxes in the demo?

How it appears for me: