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)

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)

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow edited Aug 10, 2011 at 21:50 Tristan asked Aug 10, 2011 at 21:21 TristanTristan 3,88555 gold badges3737 silver badges5858 bronze badges 4

• Without outlines it's just one big black canvas though, right? – James Commented Aug 10, 2011 at 21:46
• yes essentially in the actual code (and the picture) the color of each square is slightly different, with the rgb value incrementing by 1 in either the red or the blue channels – Tristan Commented Aug 10, 2011 at 21:48
• Do you really mean "overlap"? The edges of each isometric square aren't touching, right? You want to close the gap between them? – James Commented Aug 10, 2011 at 21:53
• Yeah each square actually over laps other squares there is no gap between them, and this is what i don't understand why am i getting an edge? – Tristan Commented Aug 10, 2011 at 22:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Compare this:

http://jsfiddle/HmVtz/

With this:

http://jsfiddle/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.