HTML5帆布避免任何子像素渲染

Question

如所見here.我一直在畫布中的亞像素精度的幾個問題。現在我有更多。我試圖渲染硬邊等長方塊，如我提供的鏈接中的圖片所示。嘗試稍後處理渲染圖像中的像素數據並提取當前顏色。

因爲有我收到不屬於原始圖像中實際存在顏色的子像素問題IM，但！無論我在哪裏開始繪製圖像中看到的線條（無論是從[1,1]到[10,10]還是從[1.5,1.5]到[10.5,10.5]），這只是一個例如）我總是得到這些子像素的顏色，這是破壞我的結果！

有誰知道我可以如何避免這種情況或建議正確的方法，我應該畫一個僞等距線（僞像素藝術等角）因此，我有很好的硬邊我的形狀，我不毀了渲染的圖像與任何種類的子像素垃圾。

Answer 1

經過一番詳盡的研究後，似乎沒有標準的方法來阻止我所經歷的事情。

根據瀏覽器的反鋸齒功能，只能針對某些繪圖操作啓用或禁用。

有關於如何避免抗鋸齒在某些情況下，在這個堆棧溢出問題的一些技巧：Can I turn off antialiasing on an HTML <canvas> element?

但唯一一個將工作對我來說是手動實現我自己的繪圖功能產生我想要的形狀沒有任何抗鋸齒。這將使用canvas putImageData函數來完成，關於如何使用此方法，有一個很好的教程right here。

暫時沒有針對該問題的支持的解決方案