HTML canvas putImageData() メソッド

例

下のコードは、getImageData() を使用してキャンバス上に指定された矩形のピクセル・データをコピーして、putImageData() によって、キャンバス上に画像データを戻します：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
putImageData()	Yes	9.0	Yes	Yes	Yes

定義と用法

putImageData() メソッドは、キャンバス上に、イメージデータ（指定した ImageData オブジェクトの）を戻します。

チップ: キャンバス上の指定された矩形のピクセルデータをコピーに関しては、 getImageData() メソッドをご覧ください。

チップ: 新しい、空 ImageData オブジェクトの作成に関しては、 createImageData() メソッドをご覧ください。

JavaScript 構文

JavaScript 構文：	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

パラメータの値

パラメータ	説明
imgData	キャンバスに戻すためにの ImageData オブジェクトを指定する
x	ImageData オブジェクトの左上隅の X 座標（ピクセルで）
y	ImageData オブジェクトの左上隅の y 座標（ピクセルで）
dirtyX	任意。キャンバスに配置する画像を配置する横 (x) の値（ピクセルで）
dirtyY	任意。キャンバスに配置する画像を配置する横 (y) の値（ピクセルで）
dirtyWidth	任意。キャンバスの画像を描画するために使用する幅
dirtyHeight	任意。キャンバスの画像を描画するために使用する高さ

HTML Canvas リファレンス