The result boils down to:

var ctx = document.getElementById(“canvas”).getContext(“2d”);
ctx.save();
// not crisp
ctx.moveTo(25,10);
ctx.lineTo(25,90);
ctx.stroke();
// one way to solve it
ctx.fillRect(50,10,1,80);
// the right way to solve it
ctx.moveTo(75.5,10);
ctx.lineTo(75.5,90);
ctx.stroke();
ctx.restore();

I came across you post looking for “crisp canvas lines”. You describe the problem I’m facing, but zooming appears not to be the cause of my problem.

If you like, please take a look at the following example:

var ctx = document.getElementById(“canvas”).getContext(“2d”);
ctx.save();
// not crisp
ctx.moveTo(33,10);
ctx.lineTo(33,90);
ctx.stroke();
// crisp
ctx.fillRect(66,10,1,80);
ctx.restore();

When I use the “default” way of drawing lines, I get the impression that two anti-aliased(?)/semi-transparent lines are drawn right next to each other, resulting in a 2px dark-grey line, where I would expect to be able to draw a crisp 1px black line.

It almost looks like your first example and I would expect it to look like your expected example. The only way I can draw these crisp lines, is by using the fillRect method to fill a rect of width 1.

Do you know if this behaviour is “by design” ? How do you go about drawing these crisp lines ?

Thanks a lot in advance.

If you don’t mind me asking, what’s the project?
And what proportion of it is in canvas as opposed to HTML?
Heck, while I’m at it, what browsers are you targeting for it?