HTML5 Canvas drawings like lines are looking blurry

To resolve the blurry issue, you need to overlap the pixels. You can change the value to −

context.moveTo(20.5, 0);
context.lineTo(20.5, 50);

You can also set the height and width like this −

canvas1 = document.getElementById(‘canvas');
canvas1.width = 250;
canvas1.height = 250;

Now set the size −

canvas1.style.width = "100px";
canvas1.style.height = "100px";