Como evitar artefatos de costura de arestas de polígono no Canvas HTML5?

Eu mantenho renderizadores paralelos em Flash e HTML5 / Canvas para o projeto de código aberto OpenHeatMap. Estou atormentado por uma inconsistência na renderização de polígonos preenchidos com coordenadas fracionárias entre as duas versões. Se você renderizar dois polígonos que compartilham uma aresta, o Canvas mostrará uma junção visível ao longo dessa aresta, enquanto o Flash mesclará perfeitamente os dois juntos, sem diferença visível se forem da mesma cor. Reunimos aqui uma página mínima para mostrar o problema:

http://web.mailana.com/labs/stitchingbug/

[Gak, a prevenção de spam impede que isso seja uma imagem, mas veja aqui uma captura de tela web.mailana.com/labs/stitchingbug.png]

A fonte, junto com um projeto Flash que está fazendo a mesma coisa, está aqui:

github.com/petewarden/stitchingbug

A questão fundamental é que é impossível fazer uma renderização poligonal complexa se você não conseguir costurar polígonos sem costuras. Não sei exatamente quais são as regras de preenchimento do Flash, mas elas produzem os resultados corretos, assim como os renderizadores 3D. Alguém tem uma correção do lado do cliente para solucionar esse problema? É um navegador cruzado, o que faz com que pareça deliberado; portanto, qualquer referência às regras usadas também será apreciada. Aqui está o código do Canvas:

    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(0,0,0)';

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

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

questionAnswers(3)

yourAnswerToTheQuestion