画像を定義されたピクセルの四角形でレンダリングするHTML5 canvas？

Question

私は、次の6x5のイメージがあります。私はそれは、多かれ少なかれ、このコードthis.context.putImageData(this.imageData, 0, 0)を使用してレンダリング

とスケール：ようにキャンバスに爆破表示されます

をcanvas with css（canvas {width: 100%}）です。

これは、次のRGB値を持っている：私は定義されたグリッド内のブロックの正方形として個人を見ることができないのはなぜ

51.65 41.59 60.74 159.44 137.91 165.41 
147.29 71.01 52.93 73.80 115.80 93.45 
77.16 112.66 98.07 70.43 78.91 107.27 
107.39 122.85 60.67 103.91 144.37 124.05 
138.59 123.77 140.51 107.25 52.10 138.80 

を？画像の描画方法とは何か？

Answer 1

はい。これは、画像のレンダリング方法に関連しています。

イメージを色で表示すると、通常、すべてのピクセルの色に関する完全な情報が得られます。したがって、100x100の画像は100x100のピゼルサイズで完全にレンダリングされます。

しかし、あなたはUPこのイメージを拡大しようとしたとき、あなたがそれらを埋めるために約方法埋めるために利用できるより多くのピクセルが、あまり情報を持っています。だからあなたは通常補間として知られている数学的なアルゴリズムに頼っています。

キャンバスは自動的にピクセルを補間し、最も近いピクセル情報を使用してギャップを埋める。

単一のピクセルを持つ効果を得るには、のサイズをなしに拡大する必要があります。これを行うには、answerを参照するか、問題を正確に記述するための適切な用語が分かったので、いくつかの回答を見つけてください。

このCSS3ソリューションは、今のクローム41+で動作するはずです：

canvas { 
    image-rendering: pixelated; 
}