問題タブ [pixel-manipulation]

以下のグラデーション画像をキャンバスに描こうとしているのですが、右下に問題があります。

望ましい効果:

現在の出力:

私はおそらくここで本当に単純なものを見逃しています。

JSFiddle

画像のリサンプリング方法がどのように機能するかを理解しようとしています。私はいくつかのページ/ビデオを読んだり見たりして、そのアイデアを思いついたと思います. ただし、それを実装する方法に関する実用的な例は見つかりませんでした。だから私は基本から始めるべきだと思った: 1D での最近傍リサンプリング。

これは非常に簡単で、理解できたと思います。JSFiddle デモ。

次に、線形補間に進みました。それも簡単だと思ったのですが、問題があります。まず、最後のピクセル (赤でマーク) をどのように処理しますか? 隣接するピクセルは 1 つだけです。第 2 に、Photoshop の結果と比較すると、私の結果はあまりにも鮮明です。私の方法に欠陥がありますか、それとも PS が余分な作業を行っていますか? JSFiddle デモ。