CanvasRenderingContext2D: createImageData() メソッド

width

新しい ImageData オブジェクトの幅です。負の値を設定すると、矩形が左右反転します。

height

新しい ImageData オブジェクトの高さです。負の値を指定すると、矩形が上下反転します。

settings 省略可

以下のプロパティを持つオブジェクトです。

• colorSpace: 画像データの色空間を指定します。sRGB 色空間 を表す "srgb"、もしくは display-p3 色空間 を表す "display-p3" が設定できます。

imagedata

幅と高さをコピーする元として用いる既存の ImageData オブジェクトです。画像自体はコピーされません。

指定の幅と高さを持つ新しい ImageData オブジェクトを返します。この新しいオブジェクトは、透明な黒のピクセルで埋められています。

IndexSizeError DOMException

引数 width または height がゼロのとき投げられます。

このスニペットでは、createImageData() メソッドを用いて空の ImageData オブジェクトを生成します。

<canvas id="canvas"></canvas>

生成されたオブジェクトは、幅 100 ピクセル、高さ 50 ピクセルで、全部で 5,000 ピクセルからなります。ImageData オブジェクト内の各ピクセルは配列の 4 個の要素からなるので、このオブジェクトの data プロパティの要素数は 4 × 5,000 すなわち 20,000 です。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }

この例では、新しいImageData オブジェクトを生成し、紫のピクセルで埋めます。

<canvas id="canvas"></canvas>

各ピクセルは 4 個の値からなるので、for ループではループ変数を 4 ずつ加算します。各ピクセルに対応する配列の値は、順に R (赤)、G (緑)、B (青)、A (不透明度) です。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// 各ピクセルを走査する
for (let i = 0; i < imageData.data.length; i += 4) {
  // ピクセルデータを書き換える
  imageData.data[i + 0] = 190; // R 値
  imageData.data[i + 1] = 0; // G 値
  imageData.data[i + 2] = 210; // B 値
  imageData.data[i + 3] = 255; // A 値
}

// 画像データをキャンバスに描画する
ctx.putImageData(imageData, 20, 20);

結果

createImageData() や ImageData オブジェクトを用いる他の例については、キャンバスとピクセル操作や ImageData.data を参照してください。

• このメソッドを定義しているインターフェイス: CanvasRenderingContext2D
• ImageData
• キャンバスとピクセル操作