Подскажите новичку! Пожалуйста! Нужно инвертировать цветовые каналы в изображении. Не могу понять, что не так написала в скрипте?
<!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.src = 'img/penguins.png';
pic.onload = function()
{
context.drawImage(pic, 0, 0);
}
var pic = context.getImageData(0, 0, pic.width, pic.height);
var pix = pic.data; // Обойти все пиксели изображения и инвертировать цвет.
for (var i = 0, n = pix.length; i < n; i += 4)
{
pix[i] = 255; // красный канал
pix[i+1] = 255 - pix[i+1]; // зеленый канал
pix[i+2] = 255 - pix[i+2]; // синий канал
}
// Отрисовать объект ImageData в заданных координатах (x,y).
context.putImageData(pic, 0, 0);
</script>
</body>
</html>