<!doctype html>
<html>
<meta charset='utf-8'>
<head><title></title></head>
<body>
<canvas id='image' width="500" height="375" style="border:1px solid"></canvas>
<script language="JavaScript" type="text/javascript">
var img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.crossOrigin = "Anonymous"; // client-enabled CORS to test on cross-origin google-doodle
pic.onload = function () {
// dont forget to update canvas size
context.canvas.width = pic.width;
context.canvas.height = pic.height;
context.drawImage(pic, 0, 0);
// do everything ONLY after async callback was fired
var imageData = context.getImageData(0, 0, pic.width, pic.height);
var pix = imageData.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i]; // красный канал
pix[i + 1] = 255 - pix[i + 1]; // зеленый канал
pix[i + 2] = 255 - pix[i + 2]; // синий канал
}
context.putImageData(imageData, 0, 0);
};
// it could be better to set src AFTER setting callback
pic.src = 'http://lh5.ggpht.com/VGUUvR4oz27lmDjGIfAJFPWkkDxlfQRzhOWp8wyJhoCVnzPlyzxOkdX6YgA4j_WyS7TY3lJvZfAnoHl4ZqBYRpWg2gxAzzXfdPEc4G1o=s660';
document.body.insertBefore( pic, img );
document.body.insertBefore( document.createElement('br'), img );
</script>
</body>
</html>