Drawing Single Pixel lines - Best Practice?

[Rob Jones]

I understand the 0.5pixel issue with SVG when you want to draw a sharp
horizontal or vertical line with a stroke-width of 1px.
(SVG centers the line on x+0.5,y+0.5 so drawing a line 1px wide ends
up drawing in two pixels)

What would you recommend as a 'best practice' way to handle this if
you need to draw everything as precisely as possible?

Just adding 0.5 to coordinates is not a general solution, unless you
know all your coordinates are integers.

My application involves drawing diagrams of gene layouts in DNA
sequences.

All numbers are floats in JS so when scaling my 'real world'
coordinates down to a canvas I may end up wanting to draw a line with
coordinates, say,
x0 100.1 y0 100.0
x1 150.5 y1 100.0
Is the best approach to Math.round(x0) then add 0.5, and Math.round(x1-
x0) (don't add the offset) and then Math.round(y0) + 0.5 ?
Or is there a simpler approach I'm not seeing?

Seems like a lot of work to get the expected default behavior. Of
course the benefits of Raphael outweigh that by a mile!

thanks

--Rob

[andyrew]

why not...

var xToDraw= Math.round(x0 - 0.5) + 0.5;

//line to x0 y0 is

lineTo(Math.round(x0 - 0.5) + 0.5,Math.round(y0 - 0.5) + 0.5);

doesn't look to bad... or put it in a function.