createImageData() メソッドは、新たにブランクの ImageData オブジェクトを初期化するために使います。このメソッドに 2 つの引数 sw と sh を与えて呼び出すと、矩形を表す ImageData オブジェクトが返さなければいけません。その矩形は、CSS ピクセルの単位で、幅が sw の絶対等級と、そして、高さが sh の絶対等級と等しくなります。imagedata 引数をひとつだけ与えて呼び出すと、引数として与えた ImageData オブジェクトと同じ寸法の矩形を表す ImageData オブジェクトを返さなければいけません。ImageData オブジェクトは透明な黒で塗りつぶされたものでなければいけません。

getImageData(sx, sy, sw, sh) メソッドは、canvas の領域のピクセルデータを表す ImageData オブジェクトを返さなければいけません。その領域は、それぞれの 4 つの角が、canvas の座標空間の単位で、(sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh) となる矩形で表されます。canvas の領域外にあるピクセルは、透明な黒として返されなければいけません。ピクセルは、事前に掛け合わされていないアルファ値として返されなければいけません。

createImageData() や getImageData()を呼び出すときに、無限大や NaN といった引数をひとつでも与えたなら、もしくは、、createImageData()メソッドを呼び出すときに、ひとつしか引数を与えていないのに、その引数が null なら、NOT_SUPPORTED_ERR 例外を発生させなければいけません。sw または sh のいずれかひとつでも 0 なら、このメソッドは INDEX_SIZE_ERR 例外を発生させなければいけません。

ImageData オブジェクトは、その width 属性が w にセットされ、イメージデータの行ごとに物理的なデバイスのピクセルの数となるように、height 属性は h にセットされ、イメージデータの行の数となるように、data 属性は、イメージデータを保持している CanvasPixelArray オブジェクトに初期化された状態で、初期化されなければいけません。少なくとも 1 ピクセル分のイメージデータが返されなければいけません。

CanvasPixelArray オブジェクトは、順序添え字を使って、イメージデータの各ピクセルのカラー・コンポーネントにアクセスできます。そのデータは、左から右向き、そして上から下の行に向けて、表されなければいけません。左上から始まり、各ピクセルは、赤、緑、青、アルファのコンポーネントの順序で与えられます。この配列で表される各デバイス・ピクセルの各コンポーネントは、0 ～ 255 の範囲となり、コンポーネントはそれぞれ 8 ビットずつで表されます。コンポーネントには、左上のピクセルの赤コンポーネントを 0 として増えていくインデックス番号が割り当てられます。

そのため、CanvasPixelArray オブジェクトは h×w×4 個での整数で表されます。CanvasPixelArray オブジェクトの length 属性は、この数字を返さなければいけません。

オブジェクトのインデックス番号付きプロパティは、0 ～ h×w×4-1 の範囲の数字となります。

CanvasPixelArray オブジェクトが、インデックス番号付きプロパティ index を取得できるようインデックス化されるなら、その戻り値は、その配列の index 番目のコンポーネントの値とならなければいけません。

CanvasPixelArray オブジェクトが、値 value を持ったインデックス番号付きプロパティindex を変更できるようインデックス化されるなら、その配列の index 番目のコンポーネントの値が value となるようセットされなければいけません。

幅と高さ（w と h）は、前述のメソッドの sw と sh 引数と違うかもしれません。例えば、canvas が高解像度ビットマップによって戻される場合や、sw や sh 引数がマイナスの場合です。

putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) メソッドは、canvas に ImageData 構造からのデータを書き戻します。

このメソッドに、無限大や NaN の引数をひとつでも与えると、このメソッドは NOT_SUPPORTED_ERR 例外を発生させなければいけません。

putImageData()メソッドの第 1 引数に null を与えたり ImageData オブジェクトでないものを与えると、このメソッドは TYPE_MISMATCH_ERR 例外を発生させなければいけません。

最後の 4 つの引数が省略されると、それらは、それぞれ、0, 0, imagedata 構造の width, imagedata 構造の height と見なされなければいけません。

例外を発生させることがない引数を使って putImageData() メソッドを呼び出すと、このメソッドは次の通りに動作しなければいけません：

1. dx_device を、canvas 座標空間の dx 座標に対応する canvas のピクセルデータにあるデバイスのピクセルの x 座標とします。

   dy_device を、canvas 座標空間の dy 座標に対応する canvas のピクセルデータにあるデバイスのピクセルの y 座標とします。

2. dirtyWidth がマイナスなら、dirtyX を、dirtyX+dirtyWidth とし、dirtyWidth を dirtyWidth の絶対値と同じにします。

   dirtyHeight がマイナスなら、dirtyY を、dirtyY+dirtyHeight とし、 dirtyHeight を dirtyHeight の絶対値と同じにします。

3. dirtyX がマイナスなら、dirtyWidth を、dirtyWidth+dirtyX とし、dirtyX を 0 とします。

   dirtyY がマイナスなら、dirtyHeight を、dirtyHeight+dirtyY とし、 dirtyY を 0 とします。

4. dirtyX+dirtyWidth が imagedata 引数の width 属性より大きければ、dirtyWidth を、その width 属性の値から、dirtyX の値を引いたものとします。

   dirtyY+dirtyHeight が imagedata 引数の height 属性より大きければ、dirtyHeight を、その height 属性の値から、dirtyY の値を引いたものとします。

5. これらの変更の後、dirtyWidth もしくは dirtyHeight のいずれかが 0 以下なら、canvas に何も作用せずに、これらの手順を中止します。

6. そうでなければ、dirtyX ≤ x < dirtyX+dirtyWidth and dirtyY ≤ y < dirtyY+dirtyHeight となる整数値 x と y に対して、canvas のピクセルデータにある座標 (dx_device+x, dy_device+y) となるピクセルに、imagedata 構造の中の座標 (x, y) となるピクセルの 4 つのチャネルをコピーします。

指定の座標がデバイスの座標空間に正確に対応付けできないときのピクセルの丸め処理は、この仕様では定義していません。ただし、次の点は除きます：

context.putImageData(context.getImageData(x, y, w, h), p, q);

p が x や x と w の和より小さく、q が y や y と h の和より小さければ、x, y, w, h にどんな値を与えても、これはレンダリングに目に見える変化は無いことになります。ただし、次の点は除きます：

context.createImageData(w, h);
context.getImageData(0, 0, w, h);

これら 2 つのコールは、同じ寸法の ImageData オブジェクトを返さなければいけません。つまり、ユーザーエージェントは、これらのメソッドの引数を、デバイスのピクセルの境界に対応付けできるように、丸めるかもしれませんが、その場合、createImageData(), getImageData(), putImageData()による操作すべてに対して丸め処理を実行しなければいけません。

アルファ・カラーを掛け合わせた変換は不可逆の性質を持つため、putImageData() メソッドを使ってセットされたピクセルは、getImageData()では違う値が返されることになります。

現在のパス、変換マトリックス、シャドー属性、グローバル・アルファ、クリッピング領域、グローバル・コンポジション演算子は、getImageData() と putImageData()メソッドに影響を与えてはいけません。

// canvas は <canvas> 要素のリファレンスです。
var context = canvas.getContext('2d');

// 空のスレートを生成
var data = context.createImageData(canvas.width, canvas.height);

// プラズマを生成
FillPlasma(data, 'green'); // 緑のプラズマ

// プラズマにクラウドを追加
AddCloud(data, data.width/2, data.height/2); // 中央にクラウドを入れる

// canvas にプラズマ+クラウドを描画する
context.putImageData(data, 0, 0);

// メソッドをサポートする
function FillPlasma(data, color) { ... }
function AddCloud(data, x, y) { ... }

<!DOCTYPE HTML>
<html>
 <head>
  <title>エッジ検出デモ</title>
  <script>
   var image = new Image();
   function init() {
     image.onload = demo;
     image.src = "image.jpeg";
   }
   function demo() {
     var canvas = document.getElementsByTagName('canvas')[0];
     var context = canvas.getContext('2d');

     // canvas にイメージを描画
     context.drawImage(image, 0, 0);

     // 操作するイメージデータを取得
     var input = context.getImageData(0, 0, canvas.width, canvas.height);

     // データを入れる空のスレートを取得
     var output = context.createImageData(canvas.width, canvas.height);

     // 便宜上、いくつかの変数のエイリアスを用意する
     // input.width と input.height は、canvas.width と canvas.height と
     // 同じではないかもしれないため、
     // ここでは、input.width と input.height を使う点に注意
     // （特に高解像度ディスプレイで違いが出るだろう）
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     // エッジ検出
     for (var y = 1; y < h-1; y += 1) {
       for (var x = 1; x < w-1; x += 1) {
         for (var c = 0; c < 3; c += 1) {
           var i = (y*w + x)*4 + c;
           outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                 -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                 -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
         }
         outputData[(y*w + x)*4 + 3] = 255; // alpha
       }
     }

     // 操作後にイメージデータを入れる
     context.putImageData(output, 0, 0);
   }
  </script>
 </head>
 <body onload="init()">
  <canvas></canvas>
 </body>
</html>