When I draw a simple rectangle using the following code the bottom and right edge borders are thicker that the top and left edge borders. Why is this and can I stop it?

var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);

When I draw a simple rectangle using the following code the bottom and right edge borders are thicker that the top and left edge borders. Why is this and can I stop it?

var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);

• javascript
• raphael

Share Improve this question Follow asked Aug 8, 2012 at 17:08 benshortbenshort 66088 silver badges1414 bronze badges 2

• Are you using an older version of chrome, by any chance -- if not, what browser are you using? I can't reproduce the problem you're describing. – Kevin Nielsen Commented Aug 8, 2012 at 17:14
• @KevinNielsen I'm using Chrome version 18 but I see it in FF 10.0.4 as well. – benshort Commented Aug 8, 2012 at 19:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Your rectangle's top and left borders, which are using the default 1 pixel stroke-width, are falling exactly on the top and left borders of your SVG element (as represented by a Raphael paper object. As opposed to pixel based drawing solutions, this means the line is essentially straddling the element's border, resulting in 0.5 pixels of your border stroke being clipped.

To solve, you simply need to shift your drawing over or shift the beginning offset of your SVG element's coordinates.

Here's a fiddle that shows one solution.

The square looks fine to me: http://jsfiddle/cMXBC/2/

Could you have some rogue css somewhere that is modifying the stroke of the rect? Try right-clicking the square and inspecting the rectangle in Firebug or with the Chrome inspector to see if there is any style that has been added.