HTML Canvas，ImageData.data.set，白色块不绘制

JSFiddle： http://jsfiddle.net/darrylcousins/Ls4n90eq/2/

正在循环中操作像素，数据结果似乎成功，但是当放回画布时，我有一个白色块代替了数据。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.getElementById('i');
var width = 100,
    height = 100,
    pixels = width * height,
    data32, imageData, data, idx;
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
imageData = ctx.getImageData(0, 0, width, height);
data = imageData.data;
// create 32 bit array using image data as buffer
data32 = new Uint32Array(data.buffer);
for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) { 
        var red, green, blue, alpha;
        idx = (width * y) + x;
        // current data idx get the bits
        red = (data32[idx] >> 0) & 0xff;
        green = (data32[idx] >> 8) & 0xff;
        blue = (data32[idx] >> 16) & 0xff;
        alpha = (data32[idx] >> 24) & 0xff;
        if (alpha > 0) {
            data32[idx] =
                (alpha << 24) |  // alpha
                (0 << 16) |      // blue
                (0 <<  8) |      // green
                 255;            // red
        } else {
            data32[idx] =
                (alpha << 24) | // alpha
                (255 << 16) |   // blue
                (255 <<  8) |   // green
                 255;           // red
        }
        if (y == 25) {
            // pixels are set correctly here
            // console.log(Number(data32[idx]).toString(2));
        }
    }
}
imageData.data.set(data32);
// but here the top block of 25px is blocked out with white
// and I don't see why :-(
ctx.putImageData(imageData, 0, 0);