javascript - HTML5 Canvas : getImageData と putImageData で画像を再現

Question

ウェブ上で見つけたいくつかのチュートリアルに従って、getImageData と putImageData を使用して Canvas API を使用するだけで、何日も画像を再現しようと試みてきました。Canvas から描画された四角形やその他のフォームを処理するのは簡単ですが、外部の画像を処理するのは難しいようです。

私がどのように試したかがわかります。解決策があれば、喜んでお読みください。キャンバスの左側に配置された画像を読み取り、同じキャンバスの右側に再現してみました。

var c       = document.getElementById("canvas"),
    ctx     = c.getContext('2d');
    img     = new Image(),
    img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";

img.onload = function(){
    ctx.drawImage(img, 0, 0, 400, 300);
}


//read the width and height of the canvas
var width   = c.width,
    height  = c.height,
    w2      = width / 2,
    imgData = ctx.getImageData(0, 0, 400, 300);

function drawing(){
    var index= (height * w2) * 4;   
    for(index= 0; index<=imgData.data.length; index+=4){
        red     = imgData.data[index];
        green   = imgData.data[index+1];
        blue    = imgData.data[index+2];
        alpha   = imgData.data[index+3]; 
    }
        ctx.putImageData(imgData, w2, 300);
}

drawing();

ここにフィドルがあります：http://jsfiddle.net/6g82o9Lk/

ご協力ありがとうございました！