Вот демоверсия
В частности, эту часть я нахожу запутанной:
$('.red').change(function(){
pix = imageData.data;
for(var i = 0, n = pix.length; i < n; i += 4){
var green = 1, blue = 1;
pix[i] = pix[i] * $(this).val();
pix[i + 1] = pix[i + 1] * green;
pix[i + 2] = pix[i + 2] * blue;
}
context.putImageData(imageData, 0, 0);
});
Как модифицирующий пиксель (который должен находиться в глобальной области видимости) модифицирует объект imageData? Javascript напрямую не поддерживает указатели.