I'm working on a web based editor where one can drag and resize elements. I've faces a problem regarding displaying 1px borders and elements: instead of pixel-to-pixel displaying (e.g. 1px solid line) I got a blurring line.

I've found that if I use coords with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything is pixel perfect.

Here is the examples. The element before I've changed its coords:

And after (with ".5" at the end of each and integer size):

The question is how can I force Raphael.js to display everything in sharp?

I'm working on a web based editor where one can drag and resize elements. I've faces a problem regarding displaying 1px borders and elements: instead of pixel-to-pixel displaying (e.g. 1px solid line) I got a blurring line.

I've found that if I use coords with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything is pixel perfect.

Here is the examples. The element before I've changed its coords:

And after (with ".5" at the end of each and integer size):

The question is how can I force Raphael.js to display everything in sharp?

• javascript
• svg
• raphael

• In which browser or browsers are you seeing this? – jbeard4 Commented Aug 13, 2011 at 18:44
• This behavior is by design. So it same for all browser that render canvas or SVG!!! – gavenkoa Commented Jan 17, 2013 at 19:24

3 Answers 3

I'm not sure how to do this in Raphael, but a tiny bit of CSS could help you:

.your_lines {
     shape-rendering: crispEdges;
}

Basically it turns off antialiasing for the lines, and the lines that are not horizontal or vertical may not look very pretty.

But probably you'd better stick to adding .5 to the lines' coordinates, because browsers do what they are told to: the line is on exact coordinates and the stroke is painted on both sides of the line, half pixel here and half pixel there.

This links take you point what's going wrong with integer coordinates and why +0.5 was fixed edge blurring (with nice pictures!!):

• http://diveintohtml5.info/canvas.html#pixel-madness
• http://kilianvalkhof./2010/design/the-problem-with-svg-and-canvas/

You can avoid +0.5 by:

SVG_Area.setAttribute("viewBox", "0.5 0.5 " + width + " " + height);

or by wrapper:

function fiXY(x) { return parseInt(x) + 0.5; }

var rect = document.createElementNS(SVGobj.svgNS, "rect");
rect.setAttribute("x", fiXY(x));
rect.setAttribute("y", fiXY(y));

or by:

SVG_Area.setAttribute("shape-rendering", "crispEdges");

which effect on all shapes in you SVG image....

Based on @gavenkoa's answer, you can do this with Raphael:

var paper = Raphael('#container');
if (Raphael.svg) {
    paper.setViewBox(0.5, 0.5, paper.width, paper.height);
}

Please note the Raphael.svg check as you should not apply the 0.5px shift to IE <=8 (where VML is used).