html - Draw single pixel line in html5 canvas

Question

When i try to draw single pixel black line with the following code:

    context.strokeStyle = '#000'; 
    context.beginPath();
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();  

I have more then one pixel line with gray border. How to fix it?

Here is an example http://jsfiddle.net/z4VJq/

Answer 1

Call your function with these coordinates instead: drawLine(30,30.5,300,30.5);. Try it in jsFiddle.

The problem is that your color will be at an edge, so the color will be halfway in the pixel above the edge and halfway below the edge. If you set the position of the line in the middle of an integer, it will be drawn within a pixel line.

This picture (from the linked article below) illustrates it:

You can read more about this on Canvas tutorial: A lineWidth example.