描画時に translate() を使っても、getImageData() は変換行列に影響されない。指定する矩形は描画バッファ上の位置として記録する。
例えば ctx.translate(20, 0) の後で ctx.getImageData(0, 0, 10, 10) を呼ぶと、読み取るのは描画バッファの左上にある矩形である。描画時の移動と、画素を読む位置を分けて記録すると比較しやすい。
CSS で表示している大きさを、そのまま読み取り座標として使わない。どの画素を調べたいかを描画バッファ上で確認し、同じ矩形を指定して結果を比べる。読み取り範囲は、変換後の図形とは別に確認する。
MDN の getImageData() に変換行列との関係が記載されている。検証メモには指定矩形と描画時の行列を残し、読んだ位置を再現できるようにする。
Morphio（https://morphio.online/）の開発に関わっています。この記事は画像処理の検証メモです。