要点:

  • htmlで <canvas width="123" height="456"></canvas> でキャンバスを配置
  • JavaScriptで canvas.getContext('2d') でコンテキスト取得
  • context.getImageData(0, 0, w, h) でキャンバス全体の ImageData を取得
  • imageData.data がピクセル配列で、4要素ごとに1ピクセル、RGBA各0~255で操作できる
  • context.putImageData(imageData, x, y) でキャンバスに描画

キャンバスのピクセル操作APIを使って、ピクセル単位でいじるテストプログラム:

var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

// キャンバス全体のピクセル情報を取得
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width, height = imageData.height;
var pixels = imageData.data;  // ピクセル配列:RGBA4要素で1ピクセル

// ピクセル単位で操作できる
for (var y = 0; y < height; ++y) {
  for (var x = 0; x < width; ++x) {
    var base = (y * width + x) * 4;
    // なんかピクセルに書き込む
    pixels[base + 0] = x;  // Red
    pixels[base + 1] = y;  // Green
    pixels[base + 2] = Math.max(255 - x - y, 0);  // Blue
    pixels[base + 3] = 255;  // Alpha
  }
}

// 変更した内容をキャンバスに書き戻す
context.putImageData(imageData, 0, 0);

html:

<canvas id="mycanvas" width="256" height="256"></canvas>

結果: canvas-pixel.png

デモ: jsrun.it