fillStyleキャンバスのとして特定の色を設定し、で長方形を描画した後、長方形fillRectの色が提供された色と少し異なる場合があります (getImageDataは異なる値を返します - 通常、そのうちの 1 つが 1 だけ小さくなります)。rgba色を使用している場合にのみ発生するようですが（ ではありませんrgb）、実際にはアルファチャンネルを使用する必要があります。
この問題を調べたい人のために、js fiddle で簡単なテスト スイートを作成しました: http://jsfiddle.net/LaPdP/1/
なぜこれが起こっているのか、それを修正する方法があるかどうかについてのアイデアはありますか? 少なくとも常に同じ値で発生した場合は、値を 1 増やしてバイパスしますが、私にはかなりランダムに見えます。
2017年からの更新：この回答を完全に忘れていましたが、原因は取得/設定時のデータの事前乗算に関連しています。ビットマップの数値は常に整数であるため、事前乗算の自然な結果がしばしば非整数になるため、丸め誤差が発生します。
残念ながら、これを修正する便利な方法はありません。
以下のガンマについて明確にするために: ガンマ (ガンマ設定または ICC プロファイルを介して) は画像に直接影響しますが、キャンバスに直接描画された形状の場合、表示ガンマのみが上で調整されるため、これ自体は問題になりません。データそのものではありません。
古い答え:
あなたが経験していることは、キャンバス標準の色とガンマ補正セクションの部分的な実装の結果である可能性があります.
さまざまなカラー値の理由は、少なくとも ICC プロファイルを含む画像に関しては、ブラウザーに組み込まれているカラーおよびガンマ補正によるものです。
4.8.11.1 色空間と色補正
キャンバス API は、次の 2 つのポイントでのみ色補正を実行する必要があります: 独自のガンマ補正と色空間情報を使用して画像をキャンバスにレンダリングするとき、画像をキャンバスで使用される色空間に変換するとき (たとえば、2D コンテキストの drawImage() メソッドを使用) HTMLImageElement オブジェクトを使用する場合)、および実際のキャンバス ビットマップを出力デバイスにレンダリングする場合。
ソース: w3.org
ただし、セクション 4.8.11.1 にも記載されています。
注: したがって、2D コンテキストでは、キャンバスにシェイプを描画するために使用される色は、getImageData() メソッドで取得した色と正確に一致します。
これが書かれている状況はwork in progress私の推測ですが、ブラウザには現在形状にも影響する色とガンマ補正の「怠惰な」実装があるか、またはキャンバスからのすべての色情報が修正され、後者のポイントとしてプロファイルが表示されます。最初の引用。これは、標準が最終的になるまでおそらく変わらないでしょう。