How to avoid seams between the filled areas in the canvas?

Question

When I fill adjacent areas in HTML5 canvas or similar systems like Quartz or GDI +, I see a light seam on a common front. Here is an example, (code below):

I think I understand what is happening, but I have no fix. Each edge is smoothed against white, so instead of a mixture of orange and blue you get a mixture of orange, blue and white.

Essentially the same question was asked earlier, but with less discussion and a good answer.

Some workarounds, which include drawing the first shape a little more on the seam or drawing a line above the seam, do not linger on variations, such as combinations of transparency or an odd shape.

Disabling anti-aliasing eliminates the seam for APIs that support it, but then, of course, all edges are jagged.

Is there any way to give a hint to the renderer about the alleged adjacency?

<canvas id="myCanvas" width="300" height="150" /> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,0); ctx.lineTo(115,150); ctx.lineTo(300, 50); ctx.closePath(); ctx.fillStyle="#885533"; ctx.fill(); ctx.beginPath(); ctx.moveTo(0,50); ctx.lineTo(100,0); ctx.lineTo(115,150); ctx.closePath(); ctx.fillStyle="#335588"; ctx.fill(); </script> </body> </html> 

Answer 1

Is there any way to give a hint to the renderer about the alleged adjacency?

Unfortunately, no, anti-aliasing / sub-pixels is enabled by default, and we cannot disable it.

There are several ways to solve this problem:

1) Use the markE method note in the comments and use stroke n to extrude the polygon, which will cause them to overlap. You can reduce the impact by setting the lineWidth property to 0.67 .

2) Overlap manually by translating coordinates (either by adding to the coordinate, or by means of translation) for overlapping lines by one pixel. This gives a better result than 1, since it only extrudes the polygon in the overlap area, and not from all sides. The disadvantage is that you need to manually calculate each overlap, which quickly becomes painful, especially if you want to revive them as well.

3) implement a line and pad algorithm (e.g., Bresenham). It is not so difficult, but it will slow down the drawing, and it is noticeable if you often update the graphics. The advantage is that you know exactly where the lines are drawn. The disadvantage is that you do not get any smoothing if you do not implement this and evaluate its own price.

4) A combination of 1 and 3, where you use fill and overlap overlapping lines using the Bresenham line algorithm.

5) Use a large screen canvas and draw all the scaling. Then finally draw everything on the screen canvas to the target size (or set the target size using CSS instead). This will help to mask the space and also give sharper lines, and you can also keep your original coordinates, but this requires more processing of pixels and more memory, so it is slower, but not as slow as a manual line / fill, as with 3.