CanvasにImageData形式の画像データを設定するputImageData()を使うと、JavaScriptで作成した配列の画像データ(フレームバッファ)を直接Canvasに描くことが出来ました。今回は、逆にCanvasに現在描かれている画像データをgetImageData()メソッドで取得し、JavaScriptでピクセルの色成分を書き換える「画像処理」を試してみましょう。 まず、Canvasの描画内容を格納したImageDataを取得するには、取得する範囲を指定してCanvasコンテキストのgetImageData(x, y, width, height)を呼び出します。Canvasコンテキストcontextから(0, 0)-(31, 31)の32*32ピクセルのImageDataを取得する場合なら context.getImageData(0, 0, 32, 32) のように