Question

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);

Answer 1

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.