I’ve been working on creating mazes with LimeJs and I ran into a problem:
As you can see, this maze looks like it was rendered by a dying printer: there are horizontal white lines all over the place. I was going crazy trying to track down the cause: the squares were perfectly sized/placed and the padding and margins were all zero pixels. It looked fine in Firefox, just Chrome had the issue. Finally, Andrew figured out that it was antialiasing on pixel borders and, if I offset the images by less than a pixel, they wouldn’t be “rounded off.”
I tried offsetting everything by .5 pixels:
Better, but not perfect. However, with .1 pixels:
Good enough!
I made a patch for this but I haven’t made it work for masks so I’m not going to do a pull request for it (yet). However, you can cherry-pick it from my fork of LimeJs and use it by adding the following line to your start() function:
lime.Renderer.DOM.ANTIALIAS_OFFSET.y = .1;
If anyone knows anything about why Chrome antialiases stuff like this, I’d be interested in knowing (I found lots of sites complaining that it was weird, but none explaining it).
Happy hacking!
Kristina Chodorow's Blog 
I would try not to fix the offset, but rather to change line width to get rid of the effect, but is just guessed. I assume that the browser wants to render a line and in fact internally uses points instead of pixel, so coordinates between pixel, with a line width of 1px it forces the browser to render 0.5px into top and bottom pixel, which will lead to a color mix like this gray. With a width of 0.5px same effect, just smaller as it the mix changes. If I’am right then the only way to fix it is to ensure that the line with is a multiple of 2 to always have full pixel, so this might solve it (but might cause other issues):
var so = this.stroke_ ? (x.stroke_.width+1)&0xfffffffe : 0;
However, just a guess.
LikeLike
Unfortunately, you still get this effect, even with powers of 2.
Thanks for the suggestion, but stroking won’t work once I’m using non-placeholder sprites.
LikeLike
Do you have a live example of where one can see the issue?
LikeLike
No, sorry.
LikeLike