HTML 5 płótnie zachowanie unikać nakładania na wypełnienie

Question

Jak widać na zdjęciu powyżej mam widocznych linii między moimi izometrycznych kwadratów, jest to spowodowane przez każdego kwadratu sligthly zachodziły na siebie. Teraz nakładanie się jest nieuniknione ze względu na układ współrzędnych, którego używam do rysowania (i nie chcę tego zmieniać).

To im kod używany do rysowania kwadratów

cRenderContext.beginPath(); 

cRenderContext.moveTo(iPosX, iPosY); 
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY - iTileHeightIncrement); 
cRenderContext.lineTo(iPosX + iTileWidth, iPosY); 
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY + iTileHeightIncrement); 
cRenderContext.lineTo(iPosX, iPosY); 

cRenderContext.fillStyle = "rgba(1, 0, 1, 1)"; 
cRenderContext.fill(); 
cRenderContext.closePath(); 

Co chcę osiągnąć jest zwrócenie kwadraty bez żadnych widocznych konturów, więc w zasadzie jest jakiś sposób, aby zatrzymać wypełnić tym, co go obecnie jest na zakładkę?

EDYCJA: Podkreślę, że każdy kwadrat jest narysowany z nieco innym kolorem, więc nie mogę po prostu wypełnić całego obszaru jednym kolorem i zrobić to (to wygląda na cały czarny, ale każdy kolor różni się o jeden w czerwonym lub niebieski kanał)

Answer 1

Porównaj to:

http://jsfiddle.net/HmVtz/

z tym:

http://jsfiddle.net/HmVtz/1/

Widzisz różnicę?

Różnica w kodzie jest to, że ja w oparciu o pół piksela zamiast piksela. Płótno jest takie dziwne. Czytaj kiedyś o renderowaniu antyaliasingu/subpikseli.

Aby uzyskać proste wyjaśnienie, dlaczego tak się dzieje, zobacz Ask Professor Markup here.