Html 5 toile éviter fill comportement sur le chevauchement

Question

Comme vous pouvez le voir dans l'image ci-dessus, j'ai des lignes visibles entre mes carrés isométriques, cela est causé par chaque carré qui se chevauchent les uns les autres sligthly. Maintenant, le chevauchement est inévitable en raison du système de coordonnées que j'utilise pour dessiner (Et je ne veux pas le changer).

Ceci est le code im en utilisant pour dessiner les carrés

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(); 

Ce que je veux atteindre est de tirer les carrés avec toute contours visibles, est donc essentiellement là un moyen d'arrêter de remplir faire ce qu'il en est sur le chevauchement?

EDIT: Je vais mentionner que chaque carré est dessiné avec une couleur légèrement différente, donc je ne peux pas simplement remplir toute la zone avec une couleur et être fait (il semble tout noir mais chaque couleur diffère de 1 dans le rouge ou canal bleu)

Answer 1

Comparer ceci:

http://jsfiddle.net/HmVtz/

Avec ceci:

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

Voir la différence?

La différence dans le code est que je dessine sur un demi-pixel au lieu d'un pixel. La toile est bizarre comme ça. Lire sur l'anti-aliasing/sous-pixel rendu un jour.

Pour une explication simple de la raison, reportez-vous à la rubrique Ask Professor Markup here.