Javascriptをキャンバス不完全なピクセル無効

Question

私は無効になった画像は

context.imageSmoothingEnabled = false; 

を使用して平滑化しているあなたは （クロームでズーム）下の画像にオレンジ色のオブジェクトを見れば、あなたはピクセルがどのように見ることができます奇妙に整列。

私は、元の画像が完全に置かピクセルの8×8であることを保証することができます：

私は、これは画像の平滑化を無効にする場合、または結果であるかどうかわからないんだけどそれはキャンバスの解像度と関係があります。どのようにしてピクセルを一貫して一定のサイズにするには？

ライブデモ：https://jsfiddle.net/khjnqLjo/1/

Answer 1

あなたは20×20の長方形に8×8画素の画像を描画しています。ハーフピクセルを描画することができないため、スケーリングが正しく行われません。これを解決するには、長方形のサイズを8の倍数に設定するか、元の画像を幅/高さ10ピクセルに変更します。