Question

For some reason my strokes are not showing up as the same width or opacity in my drawings. In the fiddle below I would assume that the rect and the path should both have the same stroke but they are clearly different. I am having a similar problem on my project except that the paths have the wide grey stroke and the rect has the proper skinny black one. Does anyone know a reset that makes the stroke look like a 1px black stroke and not these slightly transparent blurry 2px ones?

This is my code (jsFiddle):

var paper = Raphael(0,0,200,200);

paper.rect(0,0,50,50);
paper.path("M0,0,200,200");​

Answer 1

Change the zeroes to 0.5:

var paper = Raphael(0,0,200,200);

paper.rect(0.5,0.5,50,50);
paper.path("M0,0,200,200");​

http://jsfiddle.net/H4xyX/

Imagine the line that is the top edge of your box, going from (0,0) to (0,50) and 1 pixel wide. What’s happening is that your stroke is being drawn centered around this line- with half a pixel above the line, and half a pixel below, hence the blurriness. The extent of the width of the line is going from -0.5 to +0.5.

If you set an offset of 0.5, the line width now goes from 0 to 1 – filling the single pixel exactly.