Drawing a 1px line produces a 2px line

[DNS]

I'm new to Raphael, and am really liking this library. One thing I
haven't been able to figure out, though, which seems like it should be
simple, is how to draw a 1-pixel-wide line, or give a rect a 1-pixel
stroke. For example:

canvas.rect(20, 20, 60, 60).attr({stroke: "#000"});

The on-screen width of the border around the rect is 2 pixels. If I
draw a filled rect on top, with no stroke, it reduces the outline to 1
pixel, implying that 'stroke' draws one pixel inside the rect, and one
outside:

canvas.rect(20, 20, 60, 60).attr({fill: "#fff", 'stroke-width': 0});

If I then draw a line on top, the difference in widths is obvious:

canvas.path({stroke: "#000", 'stroke-width': 1.0}, "M30,30 L70,30");

I tried reducing the stroke-width below 1.0, but that only makes the
line lighter:

canvas.path({stroke: "#000", 'stroke-width': 0.5}, "M30,40 L70,40");

What's the correct way to get a 1px rather than 2px line or stroke?
I'm using FF3.5, if that matters. Thanks!

[Dmitry Baranovskiy]

Try this:

canvas.rect(20.5, 20.5, 60, 60);
or this

canvas.path({stroke: "#000"}, "M30.5,40.5 L70,40");

[DNS]

On Aug 11, 12:50 am, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:

> canvas.path({stroke: "#000"}, "M30.5,40.5 L70,40");

That produces a line that starts out 1px wide and transitions smoothly
to 2px wide. Adding .5 to booth coords produces a 1px line. I can
roughly guess why this would work, but is it intended behavior, or
just an SVG issue not related to Raphael? Should I write my code to
add .5 to all coords, or will this work differently in a future
release?

Thanks for developing this neat library!

[Josh Pyles]

Also, the reason this is happening is because the SVG engine lines up
the object to the exact pixels, and tries to draw the stroke in the
middle of the coordinates. This ends up with a line that runs on y
+/-0.5 and x+/-0.5.

[Josh Pyles]

It's an SVG thing. The 0.5 pixel offset, if used almost anywhere will
make lines nice and crisp. All Raphael does is create the svg
elements, so it's not really Raphael that's responsible for rendering
the result.

I would add 0.5 to anything that needs a crisp line or edge. Also,
check other browsers. I think some may render differently.

On Aug 11, 7:21 am, DNS <dnsch...@gmail.com> wrote:

[Bijay Dash]

more over you can use css to fix 0.5 offset rendering issue..

try using this...

path{

        shape-rendering:crispEdges

    }