Complete Solution for Drawing 1 Pixel Line on HTML5 Canvas

Question

Draw 1 pixel line on HTML5 canvas is always problematic.(Refer to http://jsbin.com/voqubexu/1/edit?js,output)

The approach to draw a vertical/horizontal line is x+0.5, y

Answer 1

The "wider" line you refer to results from anti-aliasing that's automatically done by the browser.

Anti-aliasing is used to display a visually less jagged line.

Short of drawing pixel-by-pixel, there's currently no way of disabling anti-aliasing drawn by the browser.

You can use Bresenham's line algorithm to draw your line by setting individual pixels. Of course, setting individual pixels results in lesser performance.

Here's example code and a Demo: http://jsfiddle.net/m1erickson/3j7hpng0/