5

Fill overlap colors

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)

Tristan
  • 3,845
  • 5
  • 35
  • 58
  • Without outlines it's just one big black canvas though, right? – James Aug 10 '11 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 Aug 10 '11 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 Aug 10 '11 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 Aug 10 '11 at 22:13

1 Answers1

8

Compare this:

http://jsfiddle.net/HmVtz/

With this:

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

See the difference?

enter image description here

enter image description here

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Ahhhhhh! Yes of course thats whats happening, I knew all about this but it slipped my mind! Thanks heaps was driving me nuts! – Tristan Aug 11 '11 at 05:33