How can I avoid polygon edge stitching artifacts in HTML5 Canvas?

Question

I maintain parallel Flash and HTML5/Canvas renderers for the OpenHeatMap open-source project. I\'m plagued by an inconsistency in the rendering of filled polygons with fract

Answer 1

This is an old question, but I had the same problem.

I find that drawing a single line between the two polygons (or an outline around them) solves the problem (in firefox and chrome at least).

That seems to fill the gap in chrome and firefox at least. It is sufficient to call ctx.stroke() after ctx.fill(), or draw a single line as follows:

ctx.beginPath()
ctx.moveTo(50.5, 0);
ctx.lineTo(50.5, 100);
ctx.stroke();

and be sure to set the strokeStyle of course.