Canvas drawings, like lines, are blurry

Question

I have a

and canvas, which is drawn using:

context.lineWidth = 1;
context.strokeStyle = \"gray\         


        

Answer 1

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

instead of this:

context.moveTo(10, 0);
context.lineTo(10, 30);

do this:

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

dive into HTML5's canvas chapter talks about this nicely
(look for the 'ASK PROFESSOR MARKUP' box about 1/4th of the way down)