Html 5 canvas avoid fill behaviour on overlap

问题:

As you can see in the picture above I have visible lines between my isometric squares, this is caused by each square sligthly overlapping each other. Now the overlapping is unavoidable due to the coordinate system i use to draw with (And I don't want to change it).

This is the code im using to draw the squares

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

What I want to achieve is to draw the squares with out any visible outlines, so basically is there a way to stop fill doing what it currently is on overlap?

EDIT: I will mention each square is drawn with a slightly different color so I can't just fill the whole area with one color and be done (it just looks all black but each color differs by 1 in either the red or blue channel)

回答1:

Compare this:

http://jsfiddle.net/HmVtz/

With this:

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

See the difference?

The difference in the code is that I'm drawing on a half pixel instead of a pixel. Canvas is weird like that. Read up on anti-aliasing/subpixel rendering sometime.

For a simple explanation of why this is, see the Ask Professor Markup here.