HTML 5 холст избежать поведения заполнения при наложении

Question

Как вы можете видеть на картинке выше, у меня есть видимые линии между моими изометрическими квадратами, это вызвано тем, что каждый квадрат слегка перекрывает друг друга.Теперь перекрытие неизбежно из-за системы координат, которую я использую для рисования (и я не хочу ее изменять).

Это код, который я использую для рисования квадратов

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

Чего я хочу добиться, так это нарисовать квадраты без каких-либо видимых контуров, так что в принципе есть ли способ остановить заливку, делая то, что в данный момент находится в перекрытии?

РЕДАКТИРОВАТЬ: я упомяну, что каждый квадрат нарисованс немного другим цветом, поэтому я не могу просто заполнить всю область одним цветом и все готово (он просто выглядит полностью черным, но каждый цвет отличается на 1 в красном или синем канале)

Answer 1

Сравните это:

http://jsfiddle.net/HmVtz/

С этим:

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

Видите разницу?

Разница в коде в том, что я рисую на полпикселе вместо пикселя. Холст такой странный. Читайте о сглаживании / субпиксельном рендеринге.

Простое объяснение, почему это так, см. В разделе Спросите профессора по разметке здесь .