I also didn't find a way to reliably draw a non-smooth line on HTML 5 canvas, one that does not use sub pixel rendering.
Sub-pixel rendering is often nice, but when you actually want a simple monochrome diagonal line filling only whole pixels on purpose (because, e.g., you don't want your intended 1-pixel wide black line to become a two-pixel wide gray line, or you're simply making something pixel-arty), the only reliable portable way to do it is to implement bresenham and draw it pixel by pixel yourself...
The standard methods on a canvas that are supposed to make a non-smooth line, such as using exact pixel centers (shift 0.5) and width 1, work in some browsers, not in others, not for some angles of the line, and sometimes it even depends on the width and height in pixels of the canvas whether it'll look smooth or sharp, even for the exact same absolute coordinates of the line.
Sub-pixel rendering is often nice, but when you actually want a simple monochrome diagonal line filling only whole pixels on purpose (because, e.g., you don't want your intended 1-pixel wide black line to become a two-pixel wide gray line, or you're simply making something pixel-arty), the only reliable portable way to do it is to implement bresenham and draw it pixel by pixel yourself...
The standard methods on a canvas that are supposed to make a non-smooth line, such as using exact pixel centers (shift 0.5) and width 1, work in some browsers, not in others, not for some angles of the line, and sometimes it even depends on the width and height in pixels of the canvas whether it'll look smooth or sharp, even for the exact same absolute coordinates of the line.