data属性は、RGBAの順で0～255の範囲の数値が一次配列となったデータを返します。
この配列データは、ImageDataオブジェクトの各ピクセルが保有している色と透明度を表します。
ImageDataオブジェクトの各ピクセルは、ImageDataオブジェクトの左上から右下に順番に並んでおり h×w×4つの整数 で表すことができます。
hはImageDataオブジェクトの上からの位置を表します。wは高さhにおける左からの位置を表します。
4つの整数はそれぞれ0～255の範囲の数値で、順番に赤（R）・緑（G）・青（B）・透明度（A）を表します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
//描画コンテキストの取得
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//寸法100×80のImageDataオブジェクトを生成
var img01 = context.createImageData(100, 80);
//ImageDataオブジェクトのRGBA値をテキストとして描画
context.fillText(img01.data, 20, 20);
context.fillText("R："+img01.data[0], 20, 40);
context.fillText("G："+img01.data[1], 20, 60);
context.fillText("B："+img01.data[2], 20, 80);
context.fillText("A："+img01.data[3], 20, 100);
}
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
以下は、W3Cのウェブサイトに掲載されているCanvasによる作成例です。
画像ファイルからエッジを検出して、元画像の上に検出されたエッジを重ねています。
<!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);
// データを入れるための空のImageDataオブジェクトを生成
var output = context.createImageData(canvas.width, canvas.height);
// 変数を定義
// （ここで幅と高さに input.width と input.height を使用する点に注意
// canvas.width と canvas.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()">
<h3>元画像のimage.jpeg</h3>
<p><img src="image.jpeg"></p>
<h3>元画像の上にcanvasでエッジ検出した結果を重ねたもの</h3>
<canvas width="400" height="300"></canvas>
</body>
</html>