How to eliminate the seam between UV map triangles (HTML5 Canvas)?

Question

I've set up a simple demo of UV mapping at http://jsfiddle.net/pB5A9/1/ . It's based on Image manipulation and texture mapping using HTML5 Canvas? .

The algorithm itself works pretty well. There's one issue, though. There appears to be a faint seam between the triangles. I tested this both on Chrome (14.something) and Safari (5.1). It's possible it works correctly in other browsers though I cannot be sure of that.

I'm guessing the issue has something to do with clipping. The thing is I'm not sure how to tweak the coordinates so that the issue disappears. Perhaps it's missing some padding (+1) or something. Ideas are welcome. :)

Answer 1

It has to do with the way different browsers choose to take on anti-aliasing (or not).

It looks good on Chrome 15.

Clipping less should solve your problem. I'd suggest you try expanding your clipping region for each object by 0.5 or 1 pixel and see how it does. (alternatively you could try shifting everything by 0.5 pixels and seeing if the anti-aliasing changes, you might be surprised)