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


        

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.