#はじめに
昔自分で書いたブログ「Canvasメモ」の転送です。
6,7年前に書いたので情報古いかもしれません。

#画像を読み込んでcanvas表示するまでの普通の流れ

$(function() {
    var image = new Image();
    image.onload = onload;
    image.src = "image/image1.png"; // 画像パス
     
    function onload() {
        var canvas = document.getElementsByTagName('canvas')[0],
            context, imageData;
             
        // キャンバスサイズを画像サイズに合わせる
        canvas.width = image.width;
        canvas.height = image.height;
         
        // コンテキストを取得
        context = canvas.getContext('2d');
         
        // 画像をコンテキストに描画
        context.drawImage(image, 0, 0);
 
        ///////////////////////////////////
        // 以降は画像を加工する場合
        ///////////////////////////////////
         
        // 画像のバッファを取得(バッファはimageData.dataである)
//      imageData = context.getImageData(0, 0, canvas.width, canvas.height);
         
        // 画像加工プログラムをここに書く(画像にモザイク処理を施すなど)
         
        // 加工した画像を貼り付ける
//      context.putImageData(imageData, 0, 0);
    }
});

#画像のバッファについて
1pixelの色情報を保持するのに1byte(0～255)×4を必要とする。
4byteはRGBAに対応している。
例えば、1,000×1,000の画像のメモリ使用量は、4×1,000×1,000byte(約4MB)である。

画像の原点は左上であり、幅がw, 高さがhの画像の(m,n)のピクセルの色情報は、
画像バッファをbufferとすると
R: buffer[(n * w + m) * 4]
G: buffer[(n * w + m) * 4 + 1]
B: buffer[(n * w + m) * 4 + 2]
A: buffer[(n * w + m) * 4 + 3]
である。
直線や曲線を描画するAPIは存在するが、それ以外の画像処理を行う場合
画像バッファを直接触ることになる

#canvasのwidthとheightについて

<canvas width="480" height="320"></canvas>

canvas.width,canvas.heightは画像のバッファサイズである。
canvas.style.width,canvas.style.heightは見た目のサイズである。
よくわからない場合はcanvas.width,canvas.heightのみ設定すると良い。
尚、canvas.width,canvas.heightにはpxは不要である。

#context.drawImage()の引数について
引数は３パターンあり、よく忘れるためメモしておく。

context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

#context.getImageData()について
getとあるが、この関数は呼ばれる度にバッファを作成している。
その為、本メソッドは遅い。
また、戻り値をそのまま比較することは意味がない。

context.getImageData(0, 0, 100, 100) === context.getImageData(0, 0, 100, 100) // false

#ImageDataについて

[Constructor(unsigned long sw, unsigned long sh),
 Constructor(Uint8ClampedArray data, unsigned long sw, optional unsigned long sh),
 Exposed=(Window,Worker)]
interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

プロパティ全て(width,height,data)がreadonlyである為、バッファを保持するためには
ImageDataまるごと保持しなくてはならない。
dataもreadonlyであるが、配列の参照を変更できないのであって、配列の中身は変更して構わない。

###※ImageDataのコンストラクタは使えない。
以下のように定義すれば、第一引数がUint8ClampedArrayの時のheightがoptionalを除けば使える。
今のところはcontextからcreateImageDataするしかなさそうだ。

function ImageData() {
    var i = 0;
    if(arguments[0] instanceof Uint8ClampedArray) {
        var data = arguments[i++];
    }
    var width = arguments[i++];
    var height = arguments[i];      
 
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.createImageData(width, height);
    if(data) imageData.data.set(data);
    return imageData;
}
var imgData1 = new ImageData(data, width, height);
var imgData2 = new ImageData(width, height);

#drawImage と putImageDataの速度比較
以下のプログラムをで測定を実施。
drawImage()速度測定プログラム

var startTime = new Date();
for(var i = 0; i < 500; i += 1) {
    context.drawImage(image, 0, 0);
}
var endTime = new Date();
$('#timeSpan').html("context.drawImage is " + (endTime - startTime) + ' ms');

putImageData()速度測定プログラム

var startTime = new Date();
for(var i = 0; i < 500; i += 1) {
    context.putImageData(imageData, 0, 0);
}
var endTime = new Date();
$('#timeSpan').html("context.putImageData is " + (endTime - startTime) + ' ms');

結果(500回の実行にかかった時間):
drawImage: 10ms
putImageData: 1900ms
drawImageが想像以上に速い。putImageDataが結構遅い。

#Uint8Array と Uint8ClampedArrayの違い
0から255の範囲外の任意の値をクランプされた配列に1要素を設定しようとしている場合、
それは単に（値が小さいか大きいかどうかに依存します）0または255にデフォルト設定されます。
通常のUint8Arrayはちょうど取る値の最初の8ビットが設定されます。

var x = new Uint8ClampedArray([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2
 
var x = new Uint8Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // 211
console.log(x.length); // 2